Vue之弹出框

弹出框有很多种，有的适合使用v-if加上一个控制变量来控制弹窗的显示或否。但是有的框，如提示框，适合使用时插入，结束时删除元素。如下图所示：

且看vue如何实现这种方式的弹窗，这里使用的是vue-cli建立的项目。

思路

我所知，组件实例化有三种方式，见vue学习笔记3.1小节。通过$mount方法可以将组件以编程时的方式动态插入DOM中，$destroy方法可以清理组件实例，然后再删除DOM元素。

代码

1. 首先编写一个提示弹窗组件(TipLayer.vue)：

   <template>
       <div class="msg">
           {{msg}}
       </div>
   </template>
   
   
   <script>
   export default {
       name:"TipLayer",
       data(){
           return {
               msg:null
           }
       }
   }
   </script>
   
   <style scoped>
       .msg{
           position:fixed;
           left:50%;
           top:50%;
           transform:translate(-50%,-50%);
           background-color: rgba(0,0,0,0.5);
           color: white;
           padding:0.5rem 1rem;
           border-radius: 10px;
           animation: TipLayer 2s;
       }
       @keyframes TipLayer {
           from{
               transform:translate(-50%,-50%) scale(0);
               opacity: 0;
           }
           25%{
               transform:translate(-50%,-50%);
               opacity: 1;
           }
           75%{
               transform:translate(-50%,-50%);
               opacity: 1;
           }
           to{
               transform:translate(-50%,-50%) scale(0);
               opacity: 0;
           }
       }
   </style>
   

   提示弹窗组件就是这么简单

2. 编写layer.js，它负责实例化组件，插入DOM，删除组件和DOM：

   import TipLayer from "./TipLayer"
   import Vue from "vue"
   import $ from "jquery"
   import uuid from "uuid/v4"
   
   let TipLayerClass=Vue.extend(TipLayer);//创建vue子类
   
   export default {
       /**
        * 提示弹窗
        * @param msg 提示消息
        * @param callback 弹窗结束后的回调
        */
       tip(msg,callback){
           //实例对象，并初始化
           let tipLayer=new TipLayerClass();
           tipLayer.msg=msg;
           //创建挂载点
           let id="id-"+uuid();
           $("body").append(`<div id="${id}"></div>`);
           //挂载
           tipLayer.$mount("#"+id);
           //2s后删除
           setTimeout(function () {
               //删除
               tipLayer.$destroy();
               $(tipLayer.$el).remove();
               //回调
               callback?callback():null;
           },2000)
       }
   }
   

3. 调用，很简单，不给出全部代码了：

   layer.msg("我是快乐的弹窗");