欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > element-ui dialog 组件源码分享

element-ui dialog 组件源码分享

2025/2/25 2:06:57 来源:https://blog.csdn.net/qq_37309987/article/details/141614306  浏览:    关键词:element-ui dialog 组件源码分享

简单分享 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 打开结束时的回调

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词