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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
 

父组件

<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>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
 

效果

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/108777991