Dialog

Popup dialog, commonly used for message prompts, operation confirmation and input collection, supports functional calling.

Tip

Global calling solution see wot-starter, can be used in route guards, request interceptors and other scenarios.

Component Type

Alert Dialog

Alert only displays confirm button, commonly used for message notification.

<wd-dialog />
<wd-button @click="openAlert">Open Alert</wd-button>

import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openAlert = () => {
  dialog.alert({
    title: 'Tip',
    msg: 'Operation successful'
  })
}

Confirm Dialog

Confirm returns user operation result through Promise, then corresponds to confirm, catch corresponds to cancel.

<wd-dialog />
<wd-button @click="openConfirm">Open Confirm</wd-button>

import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openConfirm = () => {
  dialog
    .confirm({
      title: 'Tip',
      msg: 'Confirm to execute this operation?'
    })
    .then(() => {
      console.log('Clicked confirm')
    })
    .catch(() => {
      console.log('Clicked cancel')
    })
}

Prompt Dialog

Prompt displays input box, can be used to collect text and perform validation.

<wd-dialog />
<wd-button @click="openPrompt">Open Prompt</wd-button>

import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openPrompt = () => {
  dialog
    .prompt({
      title: 'Please enter email',
      inputPattern: /.+@.+\..+/i,
      inputError: 'Email format is incorrect'
    })
    .then((res) => {
      console.log(res.value)
    })
}

Component State

Pre-confirm Validation

beforeConfirm receives current input value, supports returning boolean or Promise<boolean>, returning false will intercept close.

<wd-dialog />
<wd-button @click="openBeforeConfirm">Pre-confirm validation</wd-button>

import { useDialog, useToast } from '@/uni_modules/wot-ui'

const dialog = useDialog()
const toast = useToast()

const openBeforeConfirm = () => {
  dialog.confirm({
    title: 'Delete Confirmation',
    msg: 'Confirm to delete this record?',
    beforeConfirm: () => {
      toast.loading('Deleting...')
      return new Promise((resolve) => {
        setTimeout(() => {
          toast.close()
          resolve(true)
        }, 1500)
      })
    }
  })
}

Input Validation

Prompt supports both regex validation input-pattern and function validation input-validate.

<wd-dialog />
<wd-button @click="openPromptValidate">Input validation</wd-button>

import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openPromptValidate = () => {
  dialog.prompt({
    title: 'Please enter phone number',
    inputProps: {
      type: 'tel',
      placeholder: 'Please enter 11-digit phone number'
    },
    inputValidate: (value) => /^1[3-9]\d{9}$/.test(String(value)),
    inputError: 'Phone number format is incorrect'
  })
}

Component Variant

Style and Layout

Control dialog button style and arrangement through theme and action-layout.

<wd-dialog />
<wd-button @click="openTextTheme">Text style + vertical layout</wd-button>

import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openTextTheme = () => {
  dialog.confirm({
    title: 'Version Update',
    msg: 'New version found, update now?',
    theme: 'text',
    actionLayout: 'vertical'
  })
}

Custom Action Buttons

Multiple buttons can be defined through actions. When actions and confirm-button-props / cancel-button-props are configured simultaneously, actions takes priority.

<wd-dialog />
<wd-button @click="openActions">Custom action buttons</wd-button>

import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openActions = () => {
  dialog.show({
    title: 'Select Payment Method',
    actionLayout: 'vertical',
    actions: [
      { text: 'WeChat Pay', type: 'success', block: true },
      { text: 'Alipay', type: 'primary', block: true },
      { text: 'Cancel', block: true }
    ]
  })
}

Component Style

Icon and Header Image

Visual style can be configured through icon, icon-color, icon-props, header-image.

<wd-dialog />
<wd-button @click="openStyledDialog">Icon and header image</wd-button>

import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openStyledDialog = () => {
  dialog.alert({
    title: 'Activity Notification',
    msg: 'Congratulations on getting exclusive benefits',
    icon: 'success',
    headerImage: 'https://example.com/banner.png'
  })
}

Custom Button Style

Button properties can be passed through confirm-button-props, cancel-button-props.

<wd-dialog />
<wd-button @click="openCustomButtons">Custom button style</wd-button>

import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openCustomButtons = () => {
  dialog.confirm({
    title: 'Tip',
    msg: 'Continue?',
    confirmButtonProps: {
      type: 'success',
      customClass: 'custom-shadow'
    },
    cancelButtonProps: {
      type: 'danger',
      customClass: 'custom-shadow'
    }
  })
}

Special Style

Slot

Distinguish multiple instances through selector, and use useDialog(selector) to call specified dialog.

<wd-dialog selector="wd-dialog-slot">
  <wd-rate v-model="rate" />
</wd-dialog>
<wd-button @click="openSlotDialog">Open slot dialog</wd-button>

import { ref } from 'vue'
import { useDialog } from '@/uni_modules/wot-ui'

const rate = ref(1)
const slotDialog = useDialog('wd-dialog-slot')

const openSlotDialog = () => {
  slotDialog.confirm({
    title: 'Please rate us'
  })
}

OpenType

confirm-button-props, cancel-button-props and actions support passing button open capability properties (such as openType) and corresponding event callbacks.

<wd-dialog />
<wd-button @click="openOpenTypeDialog">Get phone number</wd-button>

import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openOpenTypeDialog = () => {
  dialog.confirm({
    title: 'Get phone number',
    confirmButtonProps: {
      text: 'Authorize to get',
      openType: 'getPhoneNumber',
      onGetphonenumber: (detail) => {
        console.log(detail)
      }
    }
  })
}

Methods

useDialog() returns the following methods:

Method Name	Description	Parameters	Return Value
show	Open dialog	string | DialogOptions	Promise<DialogResult>
alert	Open Alert dialog	string | DialogOptions	Promise<DialogResult>
confirm	Open Confirm dialog	string | DialogOptions	Promise<DialogResult>
prompt	Open Prompt dialog	string | DialogOptions	Promise<DialogResult>
close	Close current dialog	-	void

Options

Parameter	Description	Type	Default Value
title	Title	string	''
msg	Message content	string	''
type	Dialog type, optional values are alert, confirm, prompt	DialogType	'alert'
theme	Button style, optional values are button, text	DialogTheme	'button'
zIndex	Dialog z-index	number	99
lazyRender	Dialog content lazy render	boolean	true
headerImage	Top banner image address	string	-
icon	Icon name. Optional values are success, info, warning, danger, can also pass custom icon name	string	-
iconColor	Icon color	string	-
iconProps	Pass wd-icon properties	Partial<IconProps>	-
inputValue	Prompt input box initial value	string | number	-
inputProps	Prompt mode wd-input properties	Partial<InputProps>	-
textareaProps	Prompt mode wd-textarea properties	Partial<TextareaProps>	-
inputPattern	Prompt input regex validation rule	RegExp	-
inputValidate	Prompt input function validation rule, returns boolean or error message string	(inputValue: string | number) => boolean | string	-
inputError	Prompt validation failure prompt text	string	-
showErr	Whether to show error message	boolean	false
actionLayout	Action button arrangement, optional values are horizontal, vertical	DialogActionLayout	'horizontal'
showCancelButton	Whether to show cancel button	boolean	alert is false, confirm/prompt is true
confirmButtonText	Confirm button text	string	-
cancelButtonText	Cancel button text	string	-
confirmButtonProps v1.5.0	Confirm button advanced configuration, supports passing string, object or null	DialogBoxButtonOption	{}
cancelButtonProps v1.5.0	Cancel button advanced configuration, supports passing string, object or null	DialogBoxButtonOption	Derived from showCancelButton
actions	Custom action button array, takes priority over confirm/cancel buttons after configuration	DialogAction[]	-
closeOnClickModal	Whether to support clicking mask to close (returns action as modal)	boolean	false
showClose	Whether to show top right close button	boolean	false
beforeConfirm	Pre-confirm interception function, returns boolean or Promise<boolean>	DialogBeforeConfirm	-

Attributes

wd-dialog component instance supports the following attributes:

Parameter	Description	Type	Default Value
selector	Specify unique identifier, used to distinguish multiple instances in page	string	''
root-portal v1.11.0	Whether to detach from page document flow rendering, used to solve fixed invalidation problem	boolean	false
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Slots

Name	Description	Parameters
header	Custom header area	-
image	Custom image area	-
title	Custom title area	{ icon, title, iconProps }
default	Custom content area	{ msg, type, inputValue, showErr, inputError }
actions	Custom action area	{ confirm, cancel, close }

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-dialog-bg	$filled-oppo	对话框背景色
--wot-dialog-width	280px	对话框宽度
--wot-dialog-radius	$radius-large	对话框圆角
--wot-dialog-body-padding	$padding-super-loose $padding-super-loose 0	对话框主体内边距
--wot-dialog-body-element-spacing	$spacing-tight	主体元素间距
--wot-dialog-body-element-spacing-large	$spacing-extra-loose	主体大间距
--wot-dialog-title-color	$text-main	标题文字颜色
--wot-dialog-title-font-size	$typography-body-size-extra-large	标题文字字号
--wot-dialog-title-line-height	$typography-body-line--height-size-extra-large	标题文字行高
--wot-dialog-title-font-weight	$font-weight-medium	标题文字字重
--wot-dialog-title-margin-bottom	$spacing-tight	标题底部外边距
--wot-dialog-content-color	$text-secondary	内容文字颜色
--wot-dialog-content-font-size	$typography-body-size-main	内容文字字号
--wot-dialog-content-line-height	$typography-body-line--height-size-main	内容文字行高
--wot-dialog-content-padding	$spacing-loose	内容区内边距
--wot-dialog-content-max-height	340px	内容区最大高度
--wot-dialog-content-input-bg	$filled-bottom	输入框背景色
--wot-dialog-content-input-error-color	$danger-main	输入错误文字颜色
--wot-dialog-content-input-font-size	$typography-label-size-main	输入错误文字字号
--wot-dialog-content-input-line-height	$typography-label-line--height-size-main	输入错误文字行高
--wot-dialog-content-input-padding-top	$spacing-tight	输入提示顶部内边距
--wot-dialog-scrollbar-color	$border-main	滚动条颜色
--wot-dialog-scrollbar-width	$stroke-blod	滚动条宽度
--wot-dialog-scrollbar-radius	$radius-small	滚动条圆角
--wot-dialog-primary-color	$primary-6	默认图标颜色
--wot-dialog-success-color	$success-main	成功图标颜色
--wot-dialog-warning-color	$warning-main	警告图标颜色
--wot-dialog-error-color	$danger-main	危险图标颜色
--wot-dialog-icon-size	$n-48	图标尺寸
--wot-dialog-icon-margin-bottom	$spacing-tight	图标底部外边距
--wot-dialog-close-icon-size	$n-18	关闭图标尺寸
--wot-dialog-close-icon-color	$icon-secondary	关闭图标颜色
--wot-dialog-close-icon-top	$spacing-extra-loose	关闭图标顶部偏移
--wot-dialog-close-icon-right	$spacing-extra-loose	关闭图标右侧偏移
--wot-dialog-actions-padding	$padding-super-loose	操作区内边距
--wot-dialog-actions-padding-vertical	$padding-super-loose $padding-loose $padding-loose	垂直操作区内边距
--wot-dialog-actions-spacing	$spacing-loose	操作按钮水平间距
--wot-dialog-actions-spacing-vertical	$spacing-tight	操作按钮垂直间距
--wot-dialog-actions-confirm-font-weight	$font-weight-medium	确认按钮字重
--wot-dialog-img-border-radius	$radius-large	图片圆角
--wot-dialog-action-text-border-color	$border-main	文本按钮边框颜色
--wot-dialog-action-text-button-padding	$padding-loose $padding-extra-loose	文本按钮内边距
--wot-dialog-action-text-border	$stroke-light	文本按钮边框宽度

Source Code

Documentation

• Component