弹出框,在保留当前页面状态的情况下,告知用户并承载相关操作。

# 基础示例

弹出一个弹出框,适合需要定制更大的场景。

# 弹出框位置示例

通过设置 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 - -