Dialog 对话框
引入方式:
//按需:
import {Dialog} from 'element-ui'
//注册:
Vue.use(Dialog);
常用属性:
属性:
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
visible | 是否显示 Dialog,支持 .sync 修饰符 | boolean | — | false |
title | Dialog 的标题,也可通过具名 slot (见下表)传入 | string | — | — |
width | Dialog 的宽度 | string | — | 50% |
fullscreen | 是否为全屏 Dialog | boolean | — | false |
top | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
modal | 是否需要遮罩层 | boolean | — | true |
modal-append-to-body | 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上 | boolean | — | true |
append-to-body | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | — | false |
lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
custom-class | Dialog 的自定义类名 | string | — | — |
close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true |
close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true |
show-close | 是否显示关闭按钮 | boolean | — | true |
before-close | 关闭前的回调,会暂停 Dialog 的关闭 | function(done),done 用于关闭 Dialog | — | — |
center | 是否对头部和底部采用居中布局 | boolean | — | false |
destroy-on-close | 关闭时销毁 Dialog 中的元素 | boolean | — | false |
solt插槽:
name | 说明 |
---|---|
— | Dialog 的内容 |
title | Dialog 标题区的内容 |
footer | Dialog 按钮操作区的内容 |
事件:
事件名称 | 说明 | 回调参数 |
---|---|---|
open | Dialog 打开的回调 | — |
opened | Dialog 打开动画结束时的回调 | — |
close | Dialog 关闭的回调 | — |
closed | Dialog 关闭动画结束时的回调 | — |
使用分析:
//html:
<el-dialog
:visible.sync="dialogVisible" //是否显示 Dialog,支持 .sync 修饰符 默认false
title="提示" //设置标题
width="50%" //设置Dialog 的宽度默认50%
:fullscreen=false //dialog是否占满全屏 默认false
top='15vh' //Dialog CSS 中的 margin-top 值 默认15vh 其他单位也可以
:modal=true //是否需要遮罩层 默认true
:append-to-body=false //Dialog自身是否插入至body元素上,嵌套的Dialog必须指定该属性并赋值为true,默认false
:lock-scroll=true //是否在Dialog出现时将body滚动锁定 默认值true 如果设置了取消遮罩层 该属性设置锁定时失效
custom-class='className' //给dialog自定义一些样式
:close-on-click-modal=true //是否可以通过点击遮罩层关闭Dialog默认true
:close-on-press-escape=true //是否可以通过按下 ESC 关闭 Dialog 默认true
:show-close='true' //是否显示右上角的关闭(x)按钮 这个属性
:before-close="handleClose" //关闭前的回调会暂停Dialog的关闭
//回调函数里一定要传done,执行完想要执行的逻辑后,调用done() 否则不会关闭dialog
:center='false' //默认false 是否对头部和底部采用居中布局
:destroy-on-close='false' //关闭时销毁 Dialog 中的元素
//事件:
@open='fn' //Dialog 打开的回调 methods里边定义fn
@opened='fn' //Dialog 打开动画结束时的回调
@close='fn' //Dialog 关闭的回调
@closed='fn' //Dialog 关闭动画结束时的回调
>
<span slot="title">标题内容</span> //标题复杂的时候用这个
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer"> //footer具名插槽
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
版权声明:本文为weixin_43435271原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。