通插件方式封装Toast

1.新建文件夹toast，新建文件index.js

在js文件中导出Toast对象如下

const obj = {}

obj.install = function () {
  console.log('执行了obj的install函数');
}
export default obj

2.在main.js中安装toast插件

import toast from "./components/common/toast"

//安装toast插件
Vue.use(toast)

3.封装好Toast如下

import Toast from "./Toast";
//Toast 为自己写的vue显示toast的样式和内容

const obj = {}

//install函数会默认传过来vue
obj.install = function (Vue) {

  //1.创建组件构造器
  const toastContrustor = Vue.extend(Toast)
  //2.new的方式，根据组件构造器，可以创建出来一个组件对象
  const toast = new toastContrustor()

  //3.将组件对象手动挂载到某个div或某一个元素上
  toast.$mount(document.createElement('div'))

  //4.toast.$el对应的就是div
  //将toast内容添加到当前页面中
  document.body.appendChild(toast.$el)

  //将toast对象赋值给 Vue.prototype.$toast
  Vue.prototype.$toast = toast;
}
export default obj

4.在任何页面使用

 this.$toast.show('添加成功',1500);