弹出框,在保留当前页面状态的情况下,告知用户并承载相关操作。
# 基础示例
弹出一个弹出框,适合需要定制更大的场景。
# 弹出框位置示例
通过设置 placement
属性,设置弹出框的位置。
# 点击蒙层或按 ESC 不关闭弹出框
通过设置 persistent=true
,则无法通过点击蒙层或按 ESC 关闭弹出框。
# 弹出框全屏显示
通过设置 maximized=true
,实现弹出框的全屏,和 placement
属性一起使用可以控制弹出框的出现方向。
# 弹出框层叠
弹出框内部点击继续出现弹出框,配合一定的样式可实现。
# URL 联动
通过 bindUrl
属性,显式控制 URL 与 Dialog 联动。打开以下弹框,URL 会跟随变化(URL Query),点击浏览器的后退按钮可以关闭弹出框。复制带参数的 URL 打开新的页面也能自动打开该弹出框。
# Drawer 抽屉效果
通过设置 placement
属性,配合一定的样式,就可以实现该效果。
# EDialog
# Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
visible | 弹出框的显示和隐藏 | Boolean | false | - |
placement | 位置:center、top、bottom、left、right | String | false | center |
transition | 组件的过渡 | String | false | - |
persistent | 用户将无法通过点击蒙层或按 ESC 键关闭弹出框 | Boolean | false | - |
maximized | 内容区是否最大化。内容区默认是 auto,且最大 80%。true 则表示全屏 | Boolean | false | - |
anchorClick | 是否默认注册锚点的 click 事件,显示 popup。否则只能通过 visible 来控制显隐。 | Boolean | false | - |
bindUrl | 是否给对话框绑定 URL,以便通过浏览器前进后退就能开关对话框(此时直接通过 visible=true 打开不会改变 URL) {query: 'xxx'} 表示自定义绑定的 URL Query 参数名,将来还会支持 path(URL 路径前缀) | Object | false | - |
closeOnRouteChange | url变化是否关闭对话框,默认url变化关闭对话框 | Boolean | false | true |
# Slots
Name | Description | Default Slot Content |
---|---|---|
default | - | - |
← ESelectRow EAlert →