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('北京欢迎您')
