vue插件形式弹窗提示组件全局

// 在组件文件建一个notice文件，文件中包含index.j, notice.vue

index.js

import Vue from 'vue'
const NoticeConstructor = Vue.extend(require('./notice.vue').default)

let nId = 1;
const Notice = (option) => {
  let id = 'notice-' + nId++

  const NoticeInstance = new NoticeConstructor({
    data: {
      content: option.message,
      type: option.type
    }
  }) // 实例化一个带有content内容的Notice
  NoticeInstance.id = id
  NoticeInstance.$mount() // 挂载但是并未插入dom，是一个完整的Vue实例
  NoticeInstance.visible = true
  let noticeDom = NoticeInstance.$el
  document.body.appendChild(noticeDom) // 将dom插入body
  NoticeInstance.$el.style.zIndex = nId + 10000
  return NoticeInstance
}

export default {
  install: Vue => {
    Vue.prototype.$notice = Notice
  }
}

notice.vue

在main.js
import Notice from '@/components/notice' //这个是index.js
Vue.use(Notice)
这样就可以在任何vue文件中引用了

          this.$notice({
            message: '提交成功！',
            type: 'success'
          });