element-ui dialog 组件源码分享

news2025/1/6 9:28:18

简单分享 dialog 组件源码,主要从以下三个方面:

1、dialog 页面结构。

2、dialog 组件属性。

3、dialog 组件挂载。

4、dialog 组件事件。

一、dialog 页面结构:

二、组件属性:

2.1 visible 是否显示 Dialog,支持 .sync 修饰符,类型 boolean,默认 false。

在 dialog 组件中,引入 popup 中的公共方法,popup 文件中的方法可以控制弹出层的显示隐藏,在所有有弹出层效果的组件中都会混入这个文件。

控制 dialog 弹框打开和关闭的监听:

控制 dialog 首次初始化时,正常显示:

2.2 title 属性,dialog 的标题

 传入 title 的两种方式,字符串传入、slot 挂载:

2.3、width dialog 的宽度:

2.4 fullscreen 是否全屏展示:

2.5、 top 弹框距离顶部的样式:

 2.6、modal 是否需要遮罩层,在body 中增加遮罩层 dom:

 

 2.7 modal-append-to-body 遮罩层的插入位置:

遮罩层是否插入到 body 中,false 则插入到dialog 的父元素上:

2.8、append-to-body  dialog 自身是否插入到 body 元素中:

2.8、lock-scroll 是否在 dialog 出现时将 body 滚动锁定,控制弹框后的背景页面是否随弹框页面内容的滚动而滚动:

 2.9、customClass 自定义弹框的样式

3.0 、close-on-click-modal 是否可以通过点击遮罩层关闭弹框,默认 true:

3.1、 close-on-press-escape 是否可以通过按 esc 键关闭弹框:

3.2、show-close  是否显示关闭按钮:

3.3、before-close 关闭前的回调函数:

 3.4、center 是否对头部和顶部进行居中布局:

3.5、 destory-on-close 关闭时销毁 dialog 中的元素,打开和关闭都没销毁,增加了 z-index 的层级值:

 

三、slot 组件的挂载

3.1、 title 挂载

3.2、 footer 操作按钮挂载,$slots.footer 中的 $slots 很好用:

四、事件:供外部组件调用、组件内部自己调用。作用是打开或者关闭弹框的方法

4.1、open、close 打开弹框的回调

4.2、opened、closed 打开结束时的回调

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3 组件之插槽

文章目录 Vue3 组件之插槽概述默认插槽具名插槽默认内容插槽没有提供内容有提供内容 作用域插槽简单使用使用解构形式 Vue3 组件之插槽 概述 插槽专门用于父组件向子组件传递标签结构。在使用时,一般会在子组件中通过slot来声明占位,在父组件中&#x…

postgres docker安装

mkdir -p /root/postgresql/data docker pull postgres:14 docker run --privilegedtrue --name postgres -e POSTGRES_PASSWORD123456 -e ALLOW_IP_RANGE0.0.0.0/0 -p 5432:5432 -v /root/postgresql/data:/var/lib/postgresql/data -d postgres:14#地址:192.168.3…

探索Wiki:开源知识管理平台及其私有化部署

在如今的信息时代,企业和团队的知识管理变得愈发重要。如何有效地存储、整理、共享和协作,是提高团队效率和创新能力的关键因素之一。今天,我要为大家介绍一款非常有用的github上开源知识管理工具——Wiki,并分享它的私有化部署方…

Python多分类Logistic回归详解与实践

在机器学习中,Logistic回归是一种基本但非常有效的分类算法。它不仅可以用于二分类问题,还可以扩展应用于多分类问题。本文将详细介绍如何使用Python实现一个多分类的Logistic回归模型,并给出详细的代码示例。 一、Logistic回归简介 Logist…

打造三甲医院人工智能矩阵新引擎(三):多模态大模型篇-Med-Gemini多面手

一、引言 1.1 研究背景与意义 近年来,随着人工智能技术的迅猛发展,医疗多模态大模型如Med-Gemini应运而生,成为医疗领域的研究热点。这些模型整合了文本、影像、基因等多源数据,能够模拟人类医生的思维方式,为医疗决策提供全面、精准的支持,有望解决传统医疗模式中的诸…

Servlet解析

概念 Servlet是运行在服务端的小程序(Server Applet),可以处理客户端的请求并返回响应,主要用于构建动态的Web应用,是SpringMVC的基础。 生命周期 加载和初始化 默认在客户端第一次请求加载到容器中,通过反射实例化…

游戏如何检测iOS越狱

不同于安卓的开源生态,iOS一直秉承着安全性更高的闭源生态,系统中的硬件、软件和服务会经过严格审核和测试,来保障安全性与稳定性。 据FairGurd观察,虽然iOS系统具备一定的安全性,但并非没有漏洞,如市面上…

android studio android sdk下载地址

android studio安装后,因为公司网络原因,一直无法安装android sdk 后经过手机网络,安装android sdk成功如下,也可以手动下载后指定android sdk本地目录 https://dl.google.com/android/repository/source-35_r01.zip https://dl…

Redis面试相关

Redis开篇 使用场景 缓存 缓存穿透 解决方法一: 方法二: 通过多次hash来获取对应的值。 小结 缓存击穿 缓存雪崩 打油诗 双写一致性 两种不同的要求 强一致 读锁代码 写锁代码 强一致,性能低。 延迟一致 方案一:消息队列 方…

gitlab的搭建及使用

1、环境准备 服务器准备 CentOS Linux release 7.9.2009 (Core)&#xff0c;内存至少4G。 修改主机名和配置ip地址 hostnamectl set-hostname <hostname> 关闭主机的防火墙 # 关闭防火墙 systemctl stop firewalld #临时关闭防火墙 systemctl disable firewalld …

趣味编程:心形曲线

目录 1.序言 2.代码展示 3.代码详解 3.1 头文件包含 3.2 绘制坐标轴函数 3.3 main 函数主体部分 4. 小结 1.序言 2025年的第一篇博客就用这个笛卡尔心形图开篇吧&#xff0c;寓意着新年大家能够有心有所属&#xff0c;祝诸位程序猿 / 程序媛 能够早点遇到自己的另一半。…

跳跃表(跳表)是什么

为什么要有跳表 正常链表只能一个一个往下走但是如果我直到我的目标位置就在链表的中部但是我还得一步一步走过去很浪费时间&#xff0c;所以跳表就是在正常链表的基础上添加了多步跳跃的指针。 什么是跳表 跳表&#xff08;Skip List&#xff09;是一种概率型的数据结构&am…

如何逐步操作vCenter修改DNS服务器?

在vSphere 7中有一个新功能&#xff0c;它允许管理员更改vCenter Server Appliance的FQDN和IP。因此本文将介绍如何轻松让vCenter修改DNS服务器。 vCenter修改DNS以及修改vCenter IP地址 与在部署 vCenter Server Appliance 后&#xff0c;您可以根据需要修改其 DNS 设置和 IP…

支持图片生成、语音转文本和文本转语音节点,支持导出和导入应用,MaxKB知识库问答系统v1.9版本发布

2025年1月3日&#xff0c;MaxKB开源知识库问答系统正式发布v1.9版本。 在v1.9社区版中&#xff0c;应用方面&#xff0c;MaxKB新增图片生成节点、文本转语音节点、语音转文本节点&#xff0c;支持用户提问时上传音频文件&#xff0c;支持导出和导入应用&#xff1b;知识库方面…

WebGL 实践(一)开发环境搭建

WebGL 是一种基于 JavaScript 的 API&#xff0c;用于在浏览器中渲染 2D和3D 图形&#xff0c;很多场景都能用&#xff0c;例如游戏开发、数据可视化、在线教育和虚拟现实等应用领域。 零、基础知识 相关基础知识很重要&#xff0c;如果会html、JavaScript等技术掌握起来会更…

商米电子秤服务插件

概述 SunmiScaleUTS封装商米电子秤服务模块&#xff0c;支持商米旗下S2, S2CC, S2L CC等设备&#xff0c;设备应用于超市、菜市场、水果店等,用于测量商品的重量,帮助实现快捷、准确、公正的交易等一系列商业场景。 功能说明 SDK插件下载 一. 电子秤参数 型号:S2, S2CC, …

【开源监控工具】Uptime Kuma:几分钟设置实时监控你的网站性能

文章目录 前言1.关于Uptime Kuma2.安装Docker3.本地部署Uptime Kuma4.使用Uptime Kuma5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定Uptime Kuma公网地址 前言 大家好&#xff01;如果你是网站运维人员或者管理着多个站点&#xff0c;那么今天我要介绍的一款工具绝对…

ubuntu操作系统安装SSH服务

1、更新仓库 sudo apt-get update 2、安装SSH服务 #安装SSH服务 apt-get install openssh-server#启用SSH服务 service ssh start#查看SSH服务运行状态 service ssh status 3、修改SSH配置文件 sudo vi /etc/ssh/sshd_config 4、开启ssh端口 sudo ufw allow ssh 5、重启SSH…

二、github基础

Github基础 备用github.com网站一、用户界面-Overview&#xff08;概览&#xff09;1用户信息2 导航栏3 热门仓库4 贡献设置5贡献活动6搜索和筛选7自定义收藏8贡献统计9最近活动10其他链接 二、用户界面-Repositories&#xff08;仓库&#xff09;1 libusb_stm322 savedata3 Fi…

Flink源码解析之:如何根据JobGraph生成ExecutionGraph

Flink源码解析之&#xff1a;如何根据JobGraph生成ExecutionGraph 在上一篇Flink源码解析中&#xff0c;我们介绍了Flink如何根据StreamGraph生成JobGraph的流程&#xff0c;并着重分析了其算子链的合并过程和JobGraph的构造流程。 对于StreamGraph和JobGraph的生成来说&…