vue中实现模态框弹出框动画（旋转弹出）--封装成组件

子组件

<template>
  <div>
    <vodal :show="show" animation="rotate" @hide="showhide">
      <div>动画插件</div>
    </vodal>
  </div>
</template>

<script>

import Vodal from "vodal";
export default {
   
  components: {
   
    Vodal,
  },
  props: ['show'],
  methods:{
   
      showhide(){
   
          this.$emit('showhide')
      }
  }
 
};
</script>

<style scoped>

@import "../../node_modules/vodal/common.css";
@import "../../node_modules/vodal/rotate.css"

</style>

父组件

<template>
  <div class="home">

    <button @click="TCKrotate">旋转弹出</button>
    <TCK :show="show" @showhide="showhide" /><!-- 旋转弹出 -->

  </div>
</template>

<script>
import TCK from "../components/TCKrotate";//导入子组件旋转弹出框
export default {
   
  name: "name",
  components: {
   
    TCK,
  },
  data() {
   
    return {
   
      show: false,
    };
  },
  methods: {
   
    TCKrotate: function () {
   
      this.show = true;
    },
    showhide() {
   
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

效果