Element UI Message 组件的实现原理

相关链接

Message Element 组件文档

Vue-extend

message.js 源码地址

Message 使用方法

绑定到Vue的原型 Vue.prototype.$message = Message;
使用 this.$message('这是一条消息提示');

实现思路

  1. 写一个Message的Vue组件
  2. 利用 Vue.extend 生成一个“子类”并实例化得到Vue实例
  3. 调用 实例.$mount() 生成DOM
  4. 获取DOM 并添加到 document

代码就不写了,例子简单参看一下代码就好了,但是主要的是一些细节问题,需要根据需求来定