vue注册类似Message的组件

1. 创建MessageTip.js

import Vue from 'vue'
import MessageTip from './MessageTip.vue'
Vue.prototype.$MessageTip = (options) => {
   // options为调用时的传入的参数
   if (options === undefined) {
      throw new Error('MessageTip未传入提示信息')
   } else if (typeof options === 'string' || typeof options === 'number') {
      options = {
         message: options
      }
   } else if (typeof options === 'object') {
      // options = options
   }
   const Message = Vue.extend(MessageTip)
   const component = new Message({
      data: options
   }).$mount()
   document.body.appendChild(component.$el)
   Vue.nextTick(() => {
      component.show = true
   })
}
MessageTip.install = (vue) => {
   vue.component(MessageTip.name, MessageTip)
}
export default MessageTip

2. mian.js引入注册

import MessageTip from './components/MessageTip/messagetip.js'
Vue.use(MessageTip)

3. 使用

const vue = new Vue()
vue.$MessageTip()