2020-06-16 toast提示框的封装

1：首先可以创建一个toast文件夹，用来放toast组件和它的js文件

2、然后在main.js文件中引入toast的js文件, 并将toast插件安装到Vue实例中，也就是挂载到实例中; Vue.use(toast)

3:一旦写了 Vue.use() 后，它就会去 toast 的js文件里执行 install函数;
注意：use 括号中的toast 相当于是个形参 它代表着 js 文件中的 obj 这个对象

4:接下来看一下toast.js

    import Vue from "vue";
    import toastcom from "./index.vue";
    
    const toast = {};
    
    toast.install = Vue => {
      const ToastCon = Vue.extend(toastcom); //组件构造器
    
      const ins = new ToastCon(); //创建实例
    
      ins.$mount(document.createElement("div")); //实例挂载dom
    
      document.body.appendChild(ins.$el); //把实例化的vue添加到body中
    
      Vue.prototype.$toast = (msg, duration = 3000) => {
        //注册为全局组件的函数
    
        ins.message = msg;
    
        ins.visible = true;
    
        setTimeout(() => {
          //异步执行
    
          ins.visible = false;
        }, duration);
      };
    };
    export default toast;
    
    // 剩余的步骤是：
    // 1.在main.js中注册使用
    // import toast from '@/dialog/index.js' //引入封装的组件
    
    // Vue.use(toast)
    
    // 2.然后在任何vue文件中可以轻松的使用组件了  this.$toast('北京欢迎您')