Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。

函数调用

为了便于使用 Dialog，提供了 showDialog、closeDialog 函数，用于显示和关闭 Dialog，可设置标识指定一个 Dialog 组件调用。

open / showDialog 返回 Promise，确认时 resolve 当前 data，取消时 reject；也可通过 confirm（入参为当前 data）/ cancel 处理，与 try/catch 两种写法等价。需接收 config 请使用 content 插槽（小程序 default 无法传参）。

WARNING

因小程序无法动态挂载组件，使用时需要页面存在一个 Dialog 组件。

<vd-dialog name="page" title="输入内容" show-cancel-button>
  <template #content="{ config }">
    <vd-input v-model="config.data.value" placeholder="请输入超过5位的内容" border clearable />
  </template>
</vd-dialog>

import { showDialog, showToast } from 'vital-design';

showDialog({
  name: 'page',
  data: { value: '' },
  showCancelButton: true,
  confirm: (data) => {
    if (data.value.trim().length <= 5) {
      showToast({
        type: 'error',
        message: '请输入超过5位的内容',
        position: 'bottom',
      });
      return false;
    }

    showToast({ message: `输入：${data.value}` });
  },
});

也可显式指定泛型：showDialog<{ value: string }>({ ... })。

卡片样式

通过 theme 属性设置样式主题，可选值为 default、card。

<vd-dialog name="page" />

import { showDialog } from 'vital-design';

showDialog({
  name: 'page',
  theme: 'card',
  title: '标题',
  message: '提示内容',
});

更换动画

通过 transition 属性设置弹窗的动画，动画名称参考 Transition 组件。

<vd-dialog name="page" />

import { showDialog } from 'vital-design';

showDialog({
  name: 'page',
  transition: 'zoom-out',
  title: '标题',
  message: '提示内容',
});

异步关闭

函数式调用时，可通过 confirm、cancel 配置操作函数（confirm 入参为当前 data），支持 Promise，通过返回 boolean 值来决定是否关闭；也可不传回调，用 try/catch 区分确认与取消，两种写法等价。

<vd-dialog name="page" />

// 函数式（方式1：confirm / cancel）
showDialog({
  title: '标题',
  message: '提示内容',
  showCancelButton: true,
  confirm: async (data) => {
    // 确认操作
  },
  cancel: async () => {
    // 取消操作
  },
});

// 函数式（方式2：try / catch）
try {
  await showDialog({
    name: 'page',
    title: '标题',
    message: '提示内容',
    showCancelButton: true,
  });

  // 确认操作
} catch (error) {
  // 取消操作
}

关闭前操作

非函数式调用时，可通过 before-close 配置关闭前操作函数，支持 Promise，通过返回 boolean 值来决定是否关闭。

<vd-dialog
  v-model="show"
  title="标题"
  message="提示内容"
  show-cancel-button
  :before-close="beforeClose"
/>

import { showToast } from 'vital-design';
import { timeout } from '@vital-design/shared';

// 非函数式
async function beforeClose(action: string) {
  // 确认操作
  if (action === 'confirm') {
    await timeout(1000); // 模拟请求

    if (Math.random() > 0.5) {
      return true; // 模拟成功
    }

    showToast('操作失败');
    return false; // 模拟失败
  }

  // 取消操作
  if (action === 'cancel') {
    ...
  }
}

单例使用

通过 v-model 控制弹窗是否展示，其他属性与函数式配置相同。

<vd-dialog
  v-model="show"
  title="标题"
  message="提示内容"
  show-cancel-button
/>

const show = ref(false);

API

Props

参数	说明	类型	默认值
v-model	是否展示	boolean	-
name	标识名称	string	'spinner'
theme	弹窗主题	'default' | 'card'	'default'
title	标题	string	-
message	内容	string	-
transition	弹出动画	TransitionName	'zoom-in'
show-confirm-button	是否展示确认按钮	boolean	true
confirm-button-text	确认按钮文案	string	-
show-cancel-button	是否展示取消按钮	boolean	false
cancel-button-text	取消按钮文案	string	-
before-close	关闭前的回调，入参 (type, data)；支持 Promise	DialogBeforeClose	-
overlay	是否显示遮罩	boolean	true
overlay-class	遮罩类名	ClassValue	-
overlay-style	遮罩样式	StyleValue	-
close-on-click-overlay	是否点击遮罩关闭	boolean	true
z-index	层级	number	2001+
lock-scroll	是否锁定背景	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
update:model-value	展示状态更新时触发	boolean
click-overlay	点击遮罩时触发	MouseEvent
confirm	确认按钮操作	-
cancel	取消按钮操作	-
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-

Slots

名称	说明	插槽参数
default	自定义内容	-
title	标题	{ config }
content	内容	{ config }
footer	底部内容	{ config }
confirm	确认按钮	{ config }
cancel	取消按钮	{ config }

Expose

方法名	说明	参数	返回值
open	打开弹窗；确认 resolve data，取消 reject	DialogOpenOption<T>	Promise<T>
close	关闭弹窗	type?: DialogActionType	Promise<unknown> | void

类型定义

组件导出以下类型定义：

import type {
  DialogTheme,
  DialogActionType,
  DialogBeforeClose,
  DialogOpenOption,
  DialogExpose,
  DialogInstance,
} from 'vital-design';