vx-dialog 弹窗

带样式预设的通用弹窗，即时反馈类的仅需配置较少参数即可使用，也支持复杂场景的控制

API

Props

Name	Introduction	Type	Default Value
title	弹窗标题	String	-
text	弹窗内容，适合纯文本	String	-
size	弹窗尺寸, 默认尺寸定宽，large 尺寸定最大宽度	'default'｜ 'large'	'default'
type	弹窗预设样式	'default' ｜ 'info' ｜ 'success' ｜ 'warn' ｜ 'error'	'default'
okText	确认按钮文案	String	OK
cancelText	取消按钮文案	String	Cancel
width	弹窗宽度	Number	-
maxWidth	弹窗最大宽度	Number	-
contentHeight	弹窗内容高度	Number	-
disableOk	禁用确认按钮	Boolean	false
hideOk	隐藏确认按钮	Boolean	false
hideCancel	隐藏取消按钮	Boolean	false
hideClose	隐藏右上角关闭按钮	Boolean	false
hideFooter	隐藏底部操作按钮区域	Boolean	false
noClickAnimation	取消点击弹窗外的弹性动效	Boolean	false
model-value	控制弹窗显示与否	Boolean	false

除此之外所有的 v-dialog 原生 props 都可使用 v-bind:[props]="[value]" 实现或覆盖

Events

Name	Payload	Introduction
click:ok	{ isActive: Ref<isActive>, isLoading: Ref<false> }	点击 OK 按钮时触发，使用此事件回调需要手动关闭弹窗 , 可以通过回调函数接收 isLoading 控制 okbtn 的loading状态
click:cancel	{ isActive: Ref<isActive> }	点击 Cancel 按钮时触发，使用此事件回调需要手动关闭弹窗
click:close	{ isActive: Ref<isActive> }	点击右上角关闭图标时触发，使用此事件回调需要手动关闭弹窗
click:outside	PointerEvent	点击弹窗以外的区域触发
update:modelValue	boolean	弹窗 model 值改变时触发

Slots

v-slot:activator

激活插槽，使用该插槽不需要绑定 v-model

scope value

{
  isActive: boolean,
  props: { activatorProps:Record<string, any> }
}

v-slot:default

默认内容区域插槽

scope value

{ isActive: Ref<boolean> }

v-slot:action-btn

底部按钮区域插槽

scope value

{ isActive: Ref<boolean> }

激活弹窗

在以下两个极简的示例里，我们可以使用两种方法来唤起弹窗。

• 1. 使用 v-model 去绑定值，并通过一个变量去驱动它
• 2. 使用 activator slot 去渲染按钮，并给按钮 v-bind props 对象的 activatorProps

预设样式

弹窗尺寸

• 预设尺寸：

  • 默认尺寸是 size: "default", 此时固定宽度，用作大多数场景的及时反馈
  • 大尺寸是 size: "large", 此时宽度靠内容撑开，最大宽度 665px，比较适合一些操作反馈类的弹窗

• 如果要自定义尺寸：还可使用 width 和 maxWidth, contentHeight 自定义宽度和内容高度

按钮及事件回调

• 提供三个事件回调来控制弹窗的开启或者关闭 click:ok, click:close, click:cancel,
• 当传入自定义事件后，弹窗不再自动点击关闭，需要自己控制

区域隐藏/禁用/显示