Dialog 弹出框

介绍

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

函数调用

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

WARNING

因小程序无法动态挂载组件，使用时需要页面存在一个 Dialog 组件，且函数调用方法需要在 onLoad 生命周期后调用。

<vd-dialog name="page" />

import { showDialog } from 'vital-design';

showDialog({
  title: '标题',
  message: '弹窗内容',
});

// 指定一个 Dialog 调用
showDialog({
  name: 'page',
  title: '标题',
  message: '提示内容',
});

卡片样式

通过 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 配置操作函数，支持 Promise，通过返回 boolean 值来决定是否关闭。

<vd-dialog name="page" />

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

// 函数式（方式2）
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	关闭前的回调函数，支持 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
click-overlay	点击遮罩时触发	MouseEvent
confirm	确认按钮操作	-
cancel	取消按钮操作	-
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-

Slots

名称	说明
default	自定义内容
title	标题
content	内容
footer	底部内容
confirm	确认按钮
cancel	取消按钮

Expose

方法名	说明	参数	返回值
open	打开弹窗	DialogOpenOption	-
close	关闭弹窗	DialogActionType	-