vue中toast插件的制作

第一次写随笔，记录一下前端学习中的知识点

1.新建一个vue文件，将要写的插件抽取成组建模式，我定义了一个show方法，通过传入的message,time来实现toast的功能

2.建一个js文件，为obj定义了一个install方法，当使用插件时会将插件挂载到页面上，并在vue的原型里添加了$toast

import Toast from '../toast.vue'
const obj={

}
obj.install=function (Vue) {
const toastContrustor=  Vue.extend(Toast)
  const toast=new toastContrustor()
  toast.$mount(document.createElement('div'))
  document.body.appendChild(toast.$el)
  Vue.prototype.$toast=toast
}
export default obj

3.在main.js中就可以使用toast了

import toast from 'components/common/toastCJ/index.js'
Vue.use(toast)

4.在需要调用toast的时候通过 this.$toast.show(传参)即可

---

补充:
在第二步中，为何不能直接通过document.appendChild(toast.$el),
好像是因为toast必须使用组件构造器，且手动挂载到div上，也不知道是不是因为这样，还需要各位大佬指点一下