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>

效果