02 element-ui源码思路 el-notification

用法特殊性，这类组件不需要在父组件‘template’中引用。可以直接调用。

this.$notify({
   
          title: '提示',
          message: '这是一条不会自动关闭的消息',
          duration: 0
        });

1.显示出弹窗

main.js文件

//1.main.vue是弹出框的组件
import Main from './main.vue';

//2.继承得到main.vue的构造器。Vue.extend用法见vue文档
const NotificationConstructor = Vue.extend(Main);

//3. this.$notify的实际调用对象
const Notification = function(options) {
   
  if (Vue.prototype.$isServer) return;
  options = options || {
   };
  const userOnClose = options.onClose;
  const id = 'notification_' + seed++;
  const position = options.position || 'top-right';
  
/*  4. 通过函数参数传入的options,通过2.得到的构造器新建一个对象，
     这里的options对象与main.vue中的按混入形式存在。*/
  instance = new NotificationConstructor({
   
    data: options
  });
  instance.id = id;
  // 5.见vue文档。$mount的部分。$mount()、Vue.extend(xxx)配合使用。
  // 当$mount()没有传入id选择器时，在文档之外渲染并且随后挂载
  instance.$mount();
  document.body.appendChild(instance.$el);
  
  // 6.到这里就完成main.vue的显示，下面是对多个对象同时显示时，位置的管理。
  instance.visible = true