Dialog 对话框

使用

import { KDialog } from "@ksware/ksw-ux";

适用

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

基础用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

需要设置 model-value / v-model 属性，它接收 Boolean，当为 true 时显示 Dialog。 Dialog 分为三个部分：header、body 和 footer，header 和 footer 分别需要接收具名为 header 和 footer 的插槽使用； title 属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了 before-close 的用法。

TIP

before-close 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

自定义内容

对话框的内容可以是任何东西，甚至是一个表格或表单。此示例显示如何在 Dialog 中使用组件库提供的的表格和表单。

自定义头部

header 可用于自定义显示标题的区域。为了保持可用性，除了使用此插槽外，使用 title 属性，或使用 titleId 插槽属性来指定哪些元素应该读取为对话框标题。

嵌套的对话框

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

通常我们不建议使用嵌套对话框。如果你需要在页面上呈现多个对话框，你可以简单地打平它们，以便它们彼此之间是平级关系。如果必须要在一个对话框内展示另一个对话框，可以将内部嵌套的对话框属性 append-to-body 设置为 true，嵌套的对话框将附加到 body 而不是其父节点，这样两个对话框都可以被正确地渲染。

内容居中

对话框的内容可以居中。

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

TIP

Dialog 的内容是懒渲染的——在被第一次打开之前，传入的默认 slot 不会被立即渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

居中对话框

从屏幕中心打开对话框。

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

关闭时销毁

启用此功能时，默认栏位下的内容将使用 v-if 指令销毁。当出现性能问题时，可以启用此功能。

需要注意的是，当这个属性被启用时，在 transition.beforeEnter 事件卸载前，除了 overlay、header (可选)与footer(可选) ，Dialog 内不会有其它任何其它的 DOM 节点存在。

可拖拽对话框

试着拖动一下header部分吧

设置 draggable 属性为true以做到拖拽设置 overflow为 true 可以让拖拽范围超出可视区。

可伸缩模式

设置 resizable 属性后，用户可以拖动右下角的边缘来伸缩对话框的大小，同时提供了最大化和最小化的功能。

API

Props

参数名	描述	类型	默认值
model-value/v-model	是否显示Dialog	`boolean`	`-`
title	Dialog对话框的标题	`string`	`-`
width	对话框的宽度	`string \| number`	`50%`
fullscreen	是否全屏显示Dialog	`boolean`	`false`
top	dialog CSS中的margin-top值	`string`	`15vh`
modal	是否显示遮罩层	`boolean`	`true`
modal-class	自定义遮罩层类名	`string`	`''`
append-to-body	Dialog自身是否插入至body元素上。嵌套的Dialog必须指定该属性并赋值为 true	`boolean`	`false`
append-to	Dialog挂载到哪个DOM元素，将覆盖append-to-body	`string \| HTMLElement`	`body`
lock-scroll	是否在Dialog出现时将body滚动锁定	`boolean`	`true`
open-delay	延迟打开Dialog，单位为毫秒	`number`	`0`
close-delay	延迟关闭Dialog，单位为毫秒	`number`	`0`
close-on-click-modal	是否可以通过点击遮罩层关闭Dialog	`boolean`	`true`
close-on-press-escape	是否可以通过按下ESC关闭Dialog	`boolean`	`true`
show-close	是否显示右上角的关闭按钮	`boolean`	`true`
before-close	关闭前的回调，会暂停Dialog的关闭，回调函数内执行done参数方法的时候才是真正关闭对话框的时候	`Function`	`-`
draggable	是否可以通过拖动Dialog进行位置调整	`boolean`	`false`
overflow	拖动范围可以超出可视区	`boolean`	`false`
center	是否将Dialog的内容居中	`boolean`	`false`
align-center	是否水平垂直对齐对话框	`boolean`	`false`
destroy-on-close	是否在Dialog关闭时销毁其中的元素	`boolean`	`false`
close-icon	自定义关闭图标	`string \| Component`	`-`
maximize-icon 1.2.4	自定义最大化图标，第一个图标为最大化图标，第二个图标为取消最大化图标	`array`	`[IconWindowMax, IconWindowReduce]`
maximize-icon 1.2.4	自定义最小化图标	`string \| Component`	`IconWindowMin`
restore-icon 1.2.4	自定义最小化后的还原图标	`string \| Component`	`IconWindowMaximize`
z-index	和原生的CSS的z-index相同，改变z轴的顺序	`number`	`-`
auto-focus-first 1.1.23	是否自动聚焦第一个 input 或 textarea 元素	`boolean`	`false`
auto-focus-to 1.1.23	弹窗打开后自动聚焦的目标input元素，支持元素选择器、ref等参数，如果传入的元素不为input或textarea，则聚焦到其后代的第一个input元素	`string \| Element \| Ref<ComponentInstance>`	`-`
resizable 1.2.0	是否可以调整大小	`boolean`	`-`
show-resize-handles 1.2.0	是否显示默认调整大小句柄	`boolean`	`true`
show-header 1.2.3	是否显示弹窗头部内容	`boolean`	`true`

Events

事件名	描述	类型
open	Dialog打开的回调	`Function`
opened	Dialog打开动画结束时的回调	`Function`
close	Dialog关闭的回调	`Function`
closed	Dialog关闭动画结束时的回调	`Function`
open-auto-focus	输入焦点聚焦在Dialog内容时的回调	`Function`
close-auto-focus	输入焦点失去时Dialog内容的回调	`Function`

Slots

插槽名	描述	参数
default	Dialog的内容	`-`
header	对话框标题的内容，会替换标题部分，但不会移除关闭按钮	`object`
footer	Dialog按钮操作区的内容	`-`

Methods

方法名	描述	类型
resetPosition	重置Dialog位置	`Function`

Dialog 对话框 ​

适用 ​

基础用法 ​

自定义内容 ​

自定义头部 ​

嵌套的对话框 ​

内容居中 ​

居中对话框 ​

关闭时销毁 ​

可拖拽对话框 ​

可伸缩模式 ​

API ​

Props ​

Events ​

Slots ​

Methods ​