Dialog 对话框

对话框组件用于在不离开当前页面的情况下，显示需要用户进行操作的内容。通常用于确认信息、警告提示、展示表单等场景。

参数

Props

名称	类型	默认值	描述
visible	boolean	false	是否显示对话框
appendTo	string | HTMLElement	body	对话框挂载的节点
esc	boolean	true	是否按下ESC键关闭对话框
lockScroll	boolean	true	是否在对话框显示时锁定页面滚动
mask	boolean	true	是否显示遮罩层
maskClosable	boolean	true	是否点击遮罩层关闭对话框
fullscreen	boolean	false	是否全屏显示
zIndex	number	4000	对话框的层级
transitionName	TransitionName	false	-
title	string	-	对话框标题
width	string | number	500px	对话框宽度
showClose	boolean	true	是否显示关闭按钮
top	string | number	15vh	对话框距离顶部的距离
center	boolean	false	是否对头部和底部采用居中布局
vertical	VerticalAlign	top	垂直对齐方式
bodyHeight	string	number	-
showFooter	boolean	true	是否显示底部区域
customClass	string	-	自定义类名

Slots

名称	描述	参数
default	对话框内容	-
title	对话框标题区内容	-
footer	对话框底部内容	-

Events

名称	描述	参数
show	对话框打开时触发	-
shown	对话框打开动画结束时触发	-
hide	对话框关闭时触发	-
hidden	对话框关闭动画结束时触发	-
cancel	对话框取消时触发	-
confirm	对话框确认时触发	-
update:visible	对话框显示状态变化时触发	(value: boolean) => void

示例

基础用法

通过控制 v-model 属性来显示/隐藏对话框。

全屏对话框

通过设置 fullscreen 属性可以让对话框全屏显示。

自定义宽度

通过设置 width 属性可以自定义对话框的宽度。

内容高度过长

当内容高度超过对话框默认高度时，可以通过设置 body-height 属性来控制内容区域高度。

子对话框

对话框可以嵌套使用，创建多层对话框。

命令式创建

除了使用组件方式创建对话框外，还可以通过 JavaScript 命令式创建。

TypeScript

// 动画名称
export type TransitionName =
  | "x-fade"
  | "x-zoom"
  | "x-slide"
  | "x-slide-up"
  | "x-slide-down"
  | "x-slide-left"
  | "x-slide-right";

export type VerticalAlign = "top" | "bottom" | "center";

命令式创建声明

export interface DialogOptions extends Partial<DialogProps> {
  /**
   * 传递给内容组件的 props
   */
  componentProps?: Record<string, any>;
}

export interface DialogInstance {
  /**
   * 关闭对话框
   */
  close: (value?: any) => void;
  /**
   * 更新对话框属性
   */
  update: (options: DialogOptions) => void;
}

export type DialogReturn = Promise<any> & {
  /**
   * 对话框实例
   */
  instance: DialogInstance;
};