Vue自定义全局Toast组件

背景：

在前端项目开发中，我们除了日常使用的vant库，还经常会根据业务自己去封装一些组件库。这样即会使得我们的代码可复用，又提高了我们的开发效率。

以最简化的Toast组件举例：

/components/toast.vue

/common/toast.js

import Toast from '@/components/toast.vue'
let ConfirmConstructor, instance

const showToast = {
  install(Vue) {
    ConfirmConstructor = Vue.extend(Toast)
    instance = new ConfirmConstructor().$mount()
    document.body.appendChild(instance.$el)

    Vue.prototype.$showToast = options => {
      Object.assign(instance, options)
      instance.init()
    }
    Vue.prototype.$showToast.clear = () => {
      instance.clear()
    }
  }
}

export default showToast

/main.js

import ShowToast from './common/toast'
Vue.use(ShowToast)

/views/demo.vue

// 展示toast
this.$showToast({
  msg: '网络错误',
  duration: 1000
})

// 清除toast
this.$showToast.clear()

备注

基于上面最简化的demo，我们可以再丰富此组件亦可创造其他组件。