PS：首先分析$message使用方法
1.import {Message} from ‘element-ui’ // 可以在组件中引用
2.this.$message.success(‘xxx’) // 可以在组件钩子中直接使用

相信第一种方法写过vue文件的应该都会写吧，我这边着重讲下第二种方法，其实第二种方法是在第一种方法中将组件的方法暴露在vue的原型上。

// src/plugin/message.vue  

<template>
  <div class="el-messages">
    <div v-for="m in messages" :key="m.id">{{m.message}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {messages: []}
  },
  mounted() {
    this.id = 0; // 当前消息组件的id
  },
  methods: {
    add(options) {
      const id = this.id++;
      const layer = {...options, id}

      this.messages.push(layer)
      setTimeout(() => {
        this.remove(layer)
      }, options.duration)
    },
    remove(layer) {
      this.messages = this.messages.filter(message => message.id !== layer.id)
    }
  }
}
</script> 
// src/plugin/message.js

import Vue from 'vue'
import MessageComponent from './Message.vue'
let vm = null
const getInstance = function() {
  if(!vm) {
    // 单例模式
    vm = new Vue({
      render: h => h(MessageComponent)
    }).$mount()
    document.body.appendChild(vm.$el)
  }
  return vm.$children[0];
}
const Message = {
  info(options) {
    getInstance().add(options)
  }
}

export {
  Message,
}

export default {
  install(Vue) {
    Vue.prototype.$message = {
      info: Message.info
    }
  }
}
// src/main.js

import Vue from 'vue'
import App from './App.vue'
import Message from './plugin/message'

Vue.config.productionTip = false
Vue.use(Message)
new Vue({
  render: h => h(App),
}).$mount('#app')

赏

十分感谢您对我的赞助😊

支付宝

微信