Dialog 对话框 |
您所在的位置:网站首页 › dialog去掉关闭按钮 › Dialog 对话框 |
Dialog 对话框 # 在保留当前页面状态的情况下,告知用户并承载相关操作。 TIP 在 SSR 场景下,您需要将组件包裹在 之中 (如: Nuxt) 和 SSG (e.g: VitePress). 基础用法 #Dialog 弹出一个对话框,适合需要定制性更大的场景。 TIP before-close 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。 如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮,那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。 自定义内容 #对话框的内容可以是任何东西,甚至是一个表格或表单。 此示例显示如何在 Dialog 中使用 Element Plus 的表格和表单。 自定义头部 #header 可用于自定义显示标题的区域。 为了保持可用性,除了使用此插槽外,使用 title 属性,或使用 titleId 插槽属性来指定哪些元素应该读取为对话框标题。 嵌套的对话框 #如果需要在一个 Dialog 内部嵌套另一个 Dialog,需要使用 append-to-body 属性。 内容居中 #对话框的内容可以居中。 TIP Dialog 的内容是懒渲染的——在被第一次打开之前,传入的默认 slot 不会被立即渲染到 DOM 上。 因此,如果需要执行 DOM 操作,或通过 ref 获取相应组件,请在 open 事件回调中进行。 居中对话框 #从屏幕中心打开对话框。 关闭时销毁 #启用此功能时,默认栏位下的内容将使用 v-if 指令销毁。 当出现性能问题时,可以启用此功能。 可拖拽对话框 #试着拖动一下header部分吧 TIP 当 modal 的值为 false 时,请一定要确保 append-to-body 属性为 true,由于 Dialog 使用 position: relative 定位,当外层的遮罩层被移除时,Dialog 则会根据当前 DOM 上的祖先节点来定位,因此可能造成定位问题。 API #Attributes #属性名说明类型默认model-value / v-model是否显示 Dialogboolean—titleDialog 对话框 Dialog 的标题, 也可通过具名 slot (见下表)传入string''width对话框的宽度,默认值为 50%string / number''fullscreen是否为全屏 Dialogbooleanfalsetopdialog CSS 中的 margin-top 值,默认为 15vhstring''modal是否需要遮罩层booleantruemodal-class遮罩的自定义类名string—append-to-bodyDialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 truebooleanfalseappend-to 2.4.3Dialog 挂载到哪个 DOM 元素 将覆盖 append-to-bodystringbodylock-scroll是否在 Dialog 出现时将 body 滚动锁定booleantruecustom-class deprecatedDialog 的自定义类名string''open-delaydialog 打开的延时时间,单位毫秒number0close-delaydrawer 关闭的延时时间,单位毫秒number0close-on-click-modal是否可以通过点击 modal 关闭 Dialogbooleantrueclose-on-press-escape是否可以通过按下 ESC 关闭 Dialogbooleantrueshow-close是否显示关闭按钮booleantruebefore-close关闭前的回调,会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.Function—draggable为 Dialog 启用可拖拽功能booleanfalsecenter是否让 Dialog 的 header 和 footer 部分居中排列booleanfalsealign-center 2.2.16是否水平垂直对齐对话框booleanfalsedestroy-on-close当关闭 Dialog 时,销毁其中的元素booleanfalseclose-icon自定义关闭图标,默认 Closestring / Component—z-index和原生的 CSS 的 z-index 相同,改变 z 轴的顺序number—header-aria-level a11yheader 的 aria-level 属性string2WARNING custom-class 已被 弃用, 之后将会在 2.4.0 移除, 请使用 class. Slots #插槽名说明—Dialog 的内容header对话框标题的内容;会替换标题部分,但不会移除关闭按钮。title deprecated与 header 作用相同 请使用 headerfooterDialog 按钮操作区的内容WARNING title 已被 弃用,将会于 2.4.0 移除, 请使用 header。 Events #事件名说明TypeopenDialog 打开的回调FunctionopenedDialog 打开动画结束时的回调FunctioncloseDialog 关闭的回调FunctionclosedDialog 关闭动画结束时的回调Functionopen-auto-focus输入焦点聚焦在 Dialog 内容时的回调Functionclose-auto-focus输入焦点从 Dialog 内容失焦时的回调FunctionFAQ #在 SFC 文件中使用对话框,scope 样式不会生效。 #典型议题:#10515 PS:既然对话框是使用 Teleport 渲染的,建议在全局范围写入根节点的样式。 当对话框被显示及隐藏时,页面元素会来回移动(抖动)。 #典型议题:#10481 PS:建议将滚动区域放置在一个挂载的 vue 节点,如 下,并对 body 使用 overflow: hidden 样式。 源代码 #组件 • 文档 贡献者 # |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |