创建公共的loading及Error并挂载到Vue.prototype上

首先在components中添加loading及Error的文件

 // loading.vue

Error

然后在index.js中完成挂载

import loading from './Loading'
import Errormes from './Errormes'
const Loading_ = {}
const Toast = {}

Loading_.install = function (Vue) {
  const LoadingConstructor = Vue.extend(loading)
  const instance = new LoadingConstructor()
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)

  Vue.prototype.$showLoading = msg => {
    instance.ShowLoadingFun(msg)
  }

  Vue.prototype.$hideLoading = () => {
    instance.HideLoadingFun()
  }
}

Toast.install = function (Vue) {
  // 创建一个Vue的“子类”组件
  const ToastConstructor = Vue.extend(Errormes)
  const instance = new ToastConstructor()
  // 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)

  // 在Vue的原型链上注册方法，控制组件
  Vue.prototype.$toast = (msg, duration = 2000) => {
    instance.Errormes.txt = msg
    instance.Errormes.show = true
    setTimeout(() => {
      instance.Errormes.show = false
    }, duration)
  }
}
export {Loading_,  Toast}
// main.js中
import { Loading_, Toast } from '@comp'
Vue.use(Loading_)
Vue.use(Toast)

• 使用

this.$toast('最多可上传' + this.num + '张图片，请重新上传！')
this.$showLoading()
this.$hideLoading()