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