Vue实现ElementUI中Message组件

message.js

import Vue from 'vue'
import messageComponent from './message.vue'
let vm;
const getInstance = () => {
     
  //单例模式  防止生成多个dom
  if (!vm) {
     
    vm = new Vue({
     
      render: h => h(messageComponent)
    }).$mount()  //render =》 dom  把render转化为dom元素  只生成  不挂载 放在内存中
    //$mount('#app')  把生成的元素挂载到#app上
    document.body.appendChild(vm.$el) //$el  保存实例生成的dom元素
  }
  return vm.$children[0]
}
//message.info
const message = {
     
  info(options) {
     
    getInstance().add(options)
  }
}
export {
     
  message
}

message.vue

<template>
  <div class="el-message">
    <div v-for="m in message" :key='m.id'>{
     {
     m.message}}</div>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      message:[],
      id:0
    }
  },
  mounted(){
     
    this.id=0
  },
  methods: {
     
    add(options){
     
      const id=this.id++
      const layer={
     ...options,id}
      this.message.push(layer)
      setTimeout(()=>{
     
        this.remove(layer)
      },options.duration)
    },
    remove(layer){
     
      this.message=this.message.filter(message=>{
     
        return message.id!==layer.id
      })
    }
  },
}
</script>

<style>

</style>

组件中引入

<template>
  <div class="home">
    <button @click="pushMessage">添加</button>
  </div>
</template>

<script>
import {
     message} from '../plugin/message'
export default {
     
  name: 'Home',
  methods: {
     
    pushMessage(){
     
      message.info({
     
        message:'这是一条消息',
        duration:2000
      })
    }
  },
  
}
</script>

效果