vue自定义组件 (两种之二)弹窗为例

  1 <template>
  2   <div class="shade">
  3     <div class="mian">
  4       <div class="content">
  5         <span>{{ message }}</span>
  6       </div>
  7       <div class="btns">
  8         <div
  9           class="btn"
 10           v-for="(btn,index) in btns"
 11           :key="index"
 12           @click="()=>clickFn(btn)"
 13         >{{btn.text}}</div>
 14       </div>
 15     </div>
 16   </div>
 17 </template>
 18 <script>
 19 export default {
 20   name: "alert",
 21   data() {
 22     return {
 23       // message: "this a alert",
 24       // btns: [
 25       //   {
 26       //     text: "yes",
 27       //     click: () => console.log("yes")
 28       //   },
 29       //   {
 30       //     text: "no",
 31       //     click: () => console.log("no")
 32       //   }
 33       // ]
 34     };
 35   },
 36   methods: {
 37     clickFn(btn) {
 38       this.$el.remove(); // 移除DOM this.$el表示这个vm实例的根元素
 39       const { click = () => console.warn("请传入回调函数") } = btn; //es6的结构赋值, btn.click如果有值,则赋值给click,否则赋值为匿名函数
 40       click(); // 执行传递进来的click方法
 41     }
 42   }
 43 };
 44 </script>
 45 
 46 <style scoped>
 47 .shade {
 48   user-select: none;
 49   width: 100vw;
 50   height: 100vh;
 51   position: fixed;
 52   top: 0;
 53   left: 0;
 54   background-color: rgba(0, 0, 0, 0.03);
 55   z-index: 998;
 56   display: flex;
 57   align-items: center;
 58   justify-content: center;
 59 }
 60 
 61 .shade .mian {
 62   background: white;
 63   width: 80%;
 64   border-radius: 5px;
 65   overflow: hidden;
 66   box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.04);
 67   box-sizing: border-box;
 68   animation: open 0.1s;
 69 }
 70 
 71 .shade .mian .content {
 72   box-sizing: border-box;
 73   width: 100%;
 74   padding: 30px 20px;
 75 }
 76 
 77 .shade .mian .btns {
 78   height: 45px;
 79   box-sizing: border-box;
 80   border-top: 1px solid rgba(0, 0, 0, 0.1);
 81   display: flex;
 82   justify-content: space-around;
 83   align-items: center;
 84 }
 85 
 86 .shade .mian .btns .btn {
 87   flex: 1 0 auto;
 88   height: 100%;
 89   display: flex;
 90   align-items: center;
 91   justify-content: center;
 92   text-align: center;
 93   border-right: 1px solid rgba(0, 0, 0, 0.1);
 94 }
 95 
 96 .shade .mian .btns .btn:last-child {
 97   border-right: none;
 98 }
 99 
100 .shade .mian .btns .btn:active {
101   color: white;
102   background-color: rgb(64, 169, 243);
103 }
104 
105 @keyframes open {
106   0%, 100% {
107     transform: scale(1);
108   }
109 
110   25%, 75% {
111     transform: scale(1.04);
112   }
113 
114   50% {
115     transform: scale(1.06);
116   }
117 }
118 </style>

 1 import Vue from ‘vue‘;
 2 import alert from ‘./alert.vue‘;
 3 let MyAlertConstructor = Vue.extend(alert);//创建vm实例的构造函数
 4 let instance;
 5 const MyAlert = (option) => { //写一个重要的方法,里面有三个内容
 6   // 创建实例并且过滤参数
 7   
 8   instance = new MyAlertConstructor({ //1生成实例
 9     data: option 
10   })
11                                       // 2 挂载实例
12   instance.$mount();
13   document.body.appendChild(instance.$el);//3原生方法插入body
14   return instance;
15 }
16 export default MyAlert;

 1   message: "你今天开心吗?",
 2         btns: [
 3           {
 4             text: "开心",
 5             click: () => {
 6               // 测试是否可以拿到这边的this
 7               console.log(this.msg);
 8             }
 9           },
10           {
11             text: "不开心",
12             click: () => {
13               // 这里的event target 可能没用 因为已经移除DOM了
14               // 返回btn原来本身
15               console.log("不开心");
16             }
17           },
18           {
19             text: "无回调"
20             // 测试一下没有回调函数的时候
21           },
22           {
23             text: "帮助",
24             click: this.isOK
25           }
26         ]