Skip to content
CONTENTS

Dialog 对话框

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

基本使用

自定义内容

对话框的内容可以是任何东西,甚至是一个表格或表单。 此示例显示如何在 Dialog 中使用 Hview plus 的空状态控件。

自定义头部

header 可用于自定义显示标题的区域。 为了保持可用性,可以使用 showClose=false 来去掉关闭按钮。

内容居中

对话框的内容可以居中。

将 center 设置为 true 即可使标题和底部居中。 center 仅影响标题和底部区域。 Dialog 的内容是任意的,在一些情况下,内容并不适合居中布局。 如果需要内容也水平居中,请自行为其添加 CSS 样式。

居中对话框

从屏幕中心打开对话框。

设置 align-center 为 true 使对话框水平垂直居中。 由于对话框垂直居中在弹性盒子中,所以 top 属性将不起作用。

可拖拽对话框

设置 draggable 属性为 true,可实现拖拽功能。

API

属性

属性名描述类型可选值默认值
modelValue / v-model是否显示 Dialogbooleantrue / falsefalse
titleDialog 对话框的标题stringtitle
widthDialog 的宽度string / number30%
aligntitle 和 footer 内容的排列方式stringcenter
alignCenter是否弹框全屏居中booleantrue / falsefalse
topDialog 对话框距离顶部的距离string25%
showClose是否显示关闭按钮booleantrue/falsetrue
scrollLock弹窗显示时是否锁定滚动条booleantrue / falsetrue
customClassDialog 的自定义类名string
closeOnModal是否可通过遮罩层关闭弹窗booleantrue / falsetrue
draggableDialog 对话框是否可拖拽booleantrue/falsefalse

插槽

插槽名说明
headerDialog 标题的内容,会替换标题部分,但不会移除关闭按钮。
contentDialog 主体内容
footerDialog 按钮操作区的内容

事件

事件名说明回调函数
open打开 Dialog 触发() =>{}
close关闭 Dialog 触发() =>{}

Released under the MIT License.