element-ui message 组件源码分享

news2024/11/27 14:30:23

今日简单分享 message 组件的源码，主要从以下四个方面来分享：

1、message 组件的页面结构

2、message 组件的 options 配置

3、mesage 组件的方法

4、个人总结

一、message 组件的页面结构

二、message 组件的 options 配置

前置说明：message 并没有注册到 Vue 实例上，而是创建了一个构造函数，并将其添加到 Vue 的原型链上，可在任何一个 Vue 组件内部通过 this.$message 的方式访问。

main.js 代码位置：

main.js 的代码讲解，主要有三个功能功能：

将 Message 实例化，并挂载到 body 中。
处理一个页面多个实例对象的情况。如果一个页面多个实例对象，使用数组的方式存储，并改变每个实例对象垂直方向的偏移量。
关闭的事件回调。处理当页面有多个实例对象时，关闭 Message 时，移除当前实例对象额高度，并调整其他实例对象的高度。设置关闭后的回调函数。

import Vue from "vue";
import Main from "./main.vue";
import { PopupManager } from "element-ui/src/utils/popup";
import { isVNode } from "element-ui/src/utils/vdom";
import { isObject } from "element-ui/src/utils/types";
let MessageConstructor = Vue.extend(Main);

// 定义实例对象
let instance;
// 存储多个实例对象
let instances = [];
// 定义一个 id 的变量
let seed = 1;

// 工厂函数 创建和显示消息
const Message = function(options) {
  // 为服务端渲染时 返回
  if (Vue.prototype.$isServer) return;
  // 接收配置对象
  options = options || {};
  // 如果 options 为字符传 则转为对象格式
  if (typeof options === "string") {
    options = {
      message: options,
    };
  }
  // 接收父组件传递过来的 onClose 方法
  let userOnClose = options.onClose;
  // 设置每个 id class 类名
  let id = "message_" + seed++;

  // 关闭的函数，调用 Message 的 close 方法
  options.onClose = function() {
    // 父组件调用实例对象中的关闭方法
    Message.close(id, userOnClose);
  };
  // 创建新的 Vue实例对象 MessageConstructor，并将其赋值给 instace 变量
  instance = new MessageConstructor({
    data: options,
  });
  // 设置当前实例的 id 值，此 id 作为当前实例的唯一标识
  instance.id = id;
  // 如果是虚拟dom
  if (isVNode(instance.message)) {
    instance.$slots.default = [instance.message];
    instance.message = null;
  }
  // 将 instance 这个 Vue 实例挂载到 $el 属性所引用的 dom 元素上
  instance.$mount();
  // 将 dom 元素添加到 body 中
  document.body.appendChild(instance.$el);
  // 设置垂直方向的偏移量
  let verticalOffset = options.offset || 20;
  // 遍历实例对象数组，并将每个实例对象的高度增加 16，作用是计算每个实例对象垂直方向的偏移量
  instances.forEach((item) => {
    verticalOffset += item.$el.offsetHeight + 16;
  });
  // 设置当前实例对象垂直方向的偏移量
  instance.verticalOffset = verticalOffset;
  // 设置当前实例对象可见，即 Main 组件可见
  instance.visible = true;
  // 设置当前实例的层级，如果页面上有 n 个实例对象，每点击一次 zIndex 就增加 n
  // 作用是保证每次新弹出的 message 弹框都在上次的 message 弹出层之上
  instance.$el.style.zIndex = PopupManager.nextZIndex();
  // 将当前实例对象存到实例对象数组当中
  instances.push(instance);
  // 返回当前实例对象
  return instance;
};

["success", "warning", "info", "error"].forEach((type) => {
  Message[type] = (options) => {
    if (isObject(options) && !isVNode(options)) {
      return Message({
        ...options,
        type,
      });
    }
    return Message({
      type,
      message: options,
    });
  };
});

// Message 定义 close 关闭方法，传入两个参数，当前实例对象的 id 和 onClose 方法
// id 为一个带有 id 参数的 className 类名
// userOnClose 为父组件传递过来的 onClose 方法
Message.close = function(id, userOnClose) {
  let len = instances.length;
  let index = -1;
  let removedHeight;
  for (let i = 0; i < len; i++) {
    // 关闭的当前实例对象的 id 等于实例对象组中的 id，则获取垂直方向的偏移量，并更新当前的索引
    if (id === instances[i].id) {
      removedHeight = instances[i].$el.offsetHeight;
      index = i;
      // 如果父组件传递过来的 onClose 是一个回调函数，则将当前实例对象回传给父组件
      if (typeof userOnClose === "function") {
        userOnClose(instances[i]);
      }
      // 删除实例对象组中的当前实例
      instances.splice(i, 1);
      break;
    }
  }
  // 如果页面无 instance 实例对象，返回
  if (len <= 1 || index === -1 || index > instances.length - 1) return;
  // 将当前实例对象后面的实例对象的垂直方向的偏移量的高度上移
  for (let i = index; i < len - 1; i++) {
    let dom = instances[i].$el;
    dom.style["top"] =
      parseInt(dom.style["top"], 10) - removedHeight - 16 + "px";
  }
};

// closeAll 关闭所有实例对象
Message.closeAll = function () {
  for (let i = instances.length - 1; i >= 0; i--) {
    // 关闭当前实例对象
    instances[i].close();
  }
};

export default Message;

isNode 方法：