element-ui message 组件源码分享

news/2024/6/24 9:31:55/文章来源:https://blog.csdn.net/qq_37309987/article/details/137157008

今日简单分享 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;// 如果是虚拟domif (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 方法:

2.1 message 属性,消息文字,类型 string / VNode,无默认值。

2.2 type 属性,主题,类型 string,success/warning/info/error,默认 info。

2.3 iconClass 属性,自定义图标的类名,会覆盖 type,类型 string,无默认值。

2.4 dangerouslyUseHTMLString 属性,是否将 message 属性作为 HTML 片段处理,类型 boolean,默认 false。

2.5 customClass 属性,自定义类名,类型 string,无默认值。

2.6 duration 属性,显示时间, 毫秒。设为 0 则不会自动关闭,类型 boolean,默认 false。

2.7 showClose 属性,是否显示关闭按钮,类型 boolean,默认 false。

2.8 center 属性,文字是否居中,类型 boolean,默认 false。

2.9 onClose 方法,关闭时的回调函数, 参数为被关闭的 message 实例,类型 function,无默认值。

2.10 offset 属性,Message 距离窗口顶部的偏移量,类型 number,默认 20。

三、message 组件的方法

3.1 close 关闭当前的 Message。

close 方法使用的代码:

展示效果如下:

3.2 closeAll 手动关闭所有 Message。

方法使用的代码如下:

展示效果如下:

四、个人总结

第一次研究动态创建组件实例,有两个心得:

4.1 和模板中静态声明组件略有不同,核心点是使用 Vue.extend,创建可复用组件构造器。

4.2 动态创建组件灵活性高,主要表现在它是编程式的,可以很方便的进行手动调用,而模板创建的组件则更易于理解和维护,各有不同的使用场景。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1033218.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

家庭网络防御系统搭建-配置流量镜像到NDR系统

由于需要将家庭网络中的全部流量送到NDR分析系统进行分析&#xff0c;因此需要一个具备流量镜像功能的交换机或者路由器。在前面文章所提及的家庭网络架构中&#xff0c;需要一台交换机即可拷贝东西向流量以及南北向流量。当然如果家庭中的路由器或者其他设备具备交换机镜像功能…

element跑马灯/轮播图,第一页隐藏左边按钮,最后一页隐藏右边按钮(vue 开箱即用)

图示&#xff1a; 第一步&#xff1a; <el-carousel :class"changeIndex0?leftBtnNone:changeIndeximgDataList.length-1? rightBtnNone:" height"546px" :autoplay"false" change"changeNext"><el-carousel-item v-for…

Windows Server 2022 使用ApacheDS用户远程桌面登录服务器

Windows Server 2022 使用ApacheDS用户远程桌面登录服务器 1、接上篇 Windows Server 2022 使用ApacheDS用户认证 使用Administrator用户远程登录192.168.1.100windows server&#xff0c;打开pGina软件 2、输入刚刚在ApacheDS中的新添加的用户测试一下&#xff0c;会自动添加…

Dapr(一) 基于云原生了解Dapr

(这期先了解Dapr&#xff0c;之后在推出如何搭建Dapr&#xff0c;以及如何使用。) 目录 引言&#xff1a; Service Mesh定义 Service Mesh解决的痛点 Istio介绍 Service Mesh遇到的挑战 分布式应用的需求 Multiple Runtime 理念推导 Dapr 介绍 Dapr 特性 Dapr 核心…

计网数据链路层的透明传输技术——字节填充、字符填充和零比特填充

字节填充&#xff08;Byte Stuffing&#xff09; 字节填充是数据链路层的一种透明传输技术&#xff0c;主要用于处理以字节为单位的异步通信中的特殊控制字符&#xff08;如ESC、SOH、EOT等&#xff09;。其主要思想是在数据字段中出现控制字符的前面插入一个特殊的转义字符&a…

学透Spring Boot 003 —— Spring 和 Spring Boot 常用注解(附面试题和思维导图)

这是 学透 Spring Boot 专栏 的第三篇&#xff0c;欢迎关注我&#xff0c;与我一起学习和探讨 Spring Boot 相关知识&#xff0c;学透 Spring Boot。 从面试题说起 今天我们通过一道和Spring Boot有关的常见面试题入手。 面试题&#xff1a;说说 Spring Boot 中有哪些常用注解…

【漏洞复现】通天星CMSV6车载视频监控平台Login弱口令漏洞

Nx01 产品简介 通天星车载视频监控平台软件拥有多种语言版本&#xff0c;应用于公交车车载视频监控、校车车载视频监控、大巴车车载视频监控、物流车载监控、油品运输车载监控等公共交通上。 Nx02 漏洞描述 通天星车载视频监控平台存在login弱口令漏洞&#xff0c;攻击者可以通…

Coursera自然语言处理专项课程04:Natural Language Processing with Attention Models笔记 Week02

Natural Language Processing with Attention Models Course Certificate 本文是学习这门课 Natural Language Processing with Attention Models的学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。 文章目录 Natural Language Processing with Attention ModelsText Su…

【前缀和差分】详细使用方法

前缀和 前缀和的作用&#xff1a; 快速求出元素组中某段区间的和 为什么下标要从1 开始&#xff1a;为了方便后面的计算&#xff0c;避免下标转换&#xff0c;设为零&#xff0c;不影响结果 定义两个数组&#xff0c;第一个为原始数组(a[])&#xff0c;第二个为前缀和数组(s[…

智能工具柜-RFID智能工具柜管理系统

智能工具柜-RFID智能工具柜管理系统 RFID工具柜管理系统是一种便捷化的工具管理系统&#xff0c;它采用RFID技术实现信息化&#xff0c;可以大大提高工具管理的效率和准确性。 日常的工具管理也确实存在一定的管理问题&#xff0c;如工具管理效率低、管理不准确等。因此&…

提升企业组网效率:如何彻底解决网络卡顿问题

在当今这个互联网高速发展的时代&#xff0c;企业的办公模式正经历着翻天覆地的变化。服务器可能位于内网或是迁移到云端&#xff0c;而这意味着员工日常工作的大部分活动都依赖于稳定的网络连接。然而&#xff0c;一个不容忽视的现实是&#xff0c;网络卡顿成为了办公室常见的…

VSCode 设置vue2模板

点击设置 > 用户代码片段 > 输入Vue &#xff08;打开vue.json&#xff09;> 将代码复制内 "Print to console": {"prefix": "<","body": ["<template>"," <div class$1></div>"…

LeetCode-240. 搜索二维矩阵 II【数组 二分查找 分治 矩阵】

LeetCode-240. 搜索二维矩阵 II【数组 二分查找 分治 矩阵】 题目描述&#xff1a;解题思路一&#xff1a;从左下角或者右上角元素出发&#xff0c;来寻找target。解题思路二&#xff1a;右上角元素&#xff0c;代码解题思路三&#xff1a;暴力也能过解题思路四&#xff1a;二分…

ubuntu 20 虚拟机配置静态ip

在/etc/netplan/ 中得文件里&#xff08;类似&#xff1a;01-network-manager-all.yaml&#xff09;添加 # Let NetworkManager manage all devices on this system network:ethernets:ens33:dhcp4: noaddresses: [192.168.40.128/24]gateway4: 192.168.40.2optional: truenam…

Cisco Firepower FMCv修改管理Ip方法

FMCv 是部署在VMWARE虚拟平台上的FMC 部署完成后&#xff0c;如何修改管理IP 1 查看当前版本 show version 可以看到是for VMware 2 修改管理IP步骤 2.1 进入expert模式 expert2.2 进入超级用户 sudo su并输入密码 2.3 查看当前网卡Ip 2.4 修改Ip 命令&#xff1a; /…

Windows10下安装git教程

Git Bash是git(版本管理器)中提供的一个命令行工具&#xff0c;外观类似于Windows系统内置的cmd命令行工具。 可以将Git Bash看作是一个终端模拟器&#xff0c;它提供了类似于Linux和Unix系统下Bash Shell环境的功能。通过Git Bash&#xff0c;用户可以在Windows系统中运行基于…

探索AI技术创业的三大机遇

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 方向一&#xff1a;行业解决方案 方向二&#xff1a;智能产品和服务 方向三&#xff1a;教育和培训 结语 我的其他博客 前言…

FPGA高端项目:解码索尼IMX327 MIPI相机+图像缩放+HDMI输出,提供开发板+工程源码+技术支持

目录 1、前言2、相关方案推荐本博主所有FPGA工程项目-->汇总目录我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、个人 FPGA高端图像处理开发板简介5、详细设计方案设计原理框图IMX327 及其配置MIPI CSI RX图像 ISP 处理自研HLS图像缩放详解图像缓存HDMI输出工程…

【御控物联】JSON结构数据转换在物流调度系统中的应用(场景案例三)

文章目录 一、前言二、场景概述三、解决方案四、在线转换工具五、技术资料 一、前言 物流调度是每个生产厂区必不可少的一个环节&#xff0c;主要包括线边物流和智能仓储。线边物流是指将物料定时、定点、定量配送到生产作业一线的环节&#xff0c;其包括从集中仓库到线边仓、…

Java接口与继承实践:Ether通信系统的构建(day16)

创建一个接口Icontroller, 再创建一个接口IReceiver, 创建一个子类实现IReceiver&#xff0c; 创建一个子类实现IContrller&#xff0c; 创建一个类Ether 创建一个Signal类 创建一个类Radiosignal继承Signal 创建一个用户User 最后创建一个Main类 今日总结&#xff1a…