Wot UI1.14.0

简体中文

English

简体中文

English

Appearance

赞助位
成为赞助商

Dialog 弹框 ​

弹出对话框，常用于消息提示、操作确认和输入收集，支持函数式调用。

提示

全局调用方案见 wot-starter，可用于路由守卫、请求拦截器等场景。

组件类型 ​

Alert 弹框 ​

Alert 仅展示确认按钮，常用于消息通知。

html
<wd-dialog />
<wd-button @click="openAlert">打开 Alert</wd-button>
ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openAlert = () => {
  dialog.alert({
    title: '提示',
    msg: '操作成功'
  })
}

Confirm 弹框 ​

Confirm 通过 Promise 返回用户操作结果，then 对应确认，catch 对应取消。

html
<wd-dialog />
<wd-button @click="openConfirm">打开 Confirm</wd-button>
ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openConfirm = () => {
  dialog
    .confirm({
      title: '提示',
      msg: '确认执行此操作吗？'
    })
    .then(() => {
      console.log('点击了确认')
    })
    .catch(() => {
      console.log('点击了取消')
    })
}

Prompt 弹框 ​

Prompt 会展示输入框，可用于采集文本并进行校验。

html
<wd-dialog />
<wd-button @click="openPrompt">打开 Prompt</wd-button>
ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openPrompt = () => {
  dialog
    .prompt({
      title: '请输入邮箱',
      inputPattern: /.+@.+\..+/i,
      inputError: '邮箱格式不正确'
    })
    .then((res) => {
      console.log(res.value)
    })
}

组件状态 ​

确认前校验 ​

beforeConfirm 接收当前输入值，支持返回 boolean 或 Promise<boolean>，返回 false 时会拦截关闭。

html
<wd-dialog />
<wd-button @click="openBeforeConfirm">确认前校验</wd-button>
ts
import { useDialog, useToast } from '@/uni_modules/wot-ui'

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

const openBeforeConfirm = () => {
  dialog.confirm({
    title: '删除确认',
    msg: '确定删除该记录吗？',
    beforeConfirm: () => {
      toast.loading('删除中...')
      return new Promise((resolve) => {
        setTimeout(() => {
          toast.close()
          resolve(true)
        }, 1500)
      })
    }
  })
}

输入校验 ​

Prompt 同时支持正则校验 input-pattern 与函数校验 input-validate。

html
<wd-dialog />
<wd-button @click="openPromptValidate">输入校验</wd-button>
ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openPromptValidate = () => {
  dialog.prompt({
    title: '请输入手机号',
    inputProps: {
      type: 'tel',
      placeholder: '请输入 11 位手机号'
    },
    inputValidate: (value) => /^1[3-9]\d{9}$/.test(String(value)),
    inputError: '手机号格式不正确'
  })
}

组件变体 ​

风格与布局 ​

通过 theme 与 action-layout 控制弹框按钮风格和排列方式。

html
<wd-dialog />
<wd-button @click="openTextTheme">Text 风格 + 纵向布局</wd-button>
ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openTextTheme = () => {
  dialog.confirm({
    title: '版本更新',
    msg: '发现新版本，是否立即更新？',
    theme: 'text',
    actionLayout: 'vertical'
  })
}

自定义操作按钮 ​

通过 actions 可以定义多个按钮。actions 与 confirm-button-props / cancel-button-props 同时配置时优先使用 actions。

html
<wd-dialog />
<wd-button @click="openActions">自定义操作按钮</wd-button>
ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openActions = () => {
  dialog.show({
    title: '选择支付方式',
    actionLayout: 'vertical',
    actions: [
      { text: '微信支付', type: 'success', block: true },
      { text: '支付宝', type: 'primary', block: true },
      { text: '取消', block: true }
    ]
  })
}

组件样式 ​

图标与头图 ​

可通过 icon、icon-color、icon-props、header-image 配置视觉样式。

html
<wd-dialog />
<wd-button @click="openStyledDialog">图标和头图</wd-button>
ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openStyledDialog = () => {
  dialog.alert({
    title: '活动通知',
    msg: '恭喜您获得专属权益',
    icon: 'success',
    headerImage: 'https://example.com/banner.png'
  })
}

自定义按钮样式 ​

可通过 confirm-button-props、cancel-button-props 透传按钮属性。

html
<wd-dialog />
<wd-button @click="openCustomButtons">自定义按钮样式</wd-button>
ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openCustomButtons = () => {
  dialog.confirm({
    title: '提示',
    msg: '是否继续？',
    confirmButtonProps: {
      type: 'success',
      customClass: 'custom-shadow'
    },
    cancelButtonProps: {
      type: 'danger',
      customClass: 'custom-shadow'
    }
  })
}

特殊样式 ​

插槽 ​

通过 selector 区分多个实例，并使用 useDialog(selector) 调用指定弹框。

html
<wd-dialog selector="wd-dialog-slot">
  <wd-rate v-model="rate" />
</wd-dialog>
<wd-button @click="openSlotDialog">打开插槽弹框</wd-button>
ts
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: '请为我们评分'
  })
}

OpenType ​

confirm-button-props、cancel-button-props 与 actions 支持透传按钮开放能力属性（如 openType）及对应事件回调。

html
<wd-dialog />
<wd-button @click="openOpenTypeDialog">获取手机号</wd-button>
ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openOpenTypeDialog = () => {
  dialog.confirm({
    title: '获取手机号',
    confirmButtonProps: {
      text: '授权获取',
      openType: 'getPhoneNumber',
      onGetphonenumber: (detail) => {
        console.log(detail)
      }
    }
  })
}

Methods ​

useDialog() 返回如下方法：

方法名称说明参数返回值
show打开弹框string | DialogOptionsPromise<DialogResult>
alert打开 Alert 弹框string | DialogOptionsPromise<DialogResult>
confirm打开 Confirm 弹框string | DialogOptionsPromise<DialogResult>
prompt打开 Prompt 弹框string | DialogOptionsPromise<DialogResult>
close关闭当前弹框-void

Options ​

参数说明类型默认值
title标题string''
msg消息内容string''
type弹框类型，可选值为 alert、confirm、promptDialogType'alert'
theme按钮风格，可选值为 button、textDialogTheme'button'
zIndex弹窗层级number99
lazyRender弹层内容懒渲染booleantrue
headerImage顶部通栏图片地址string-
icon图标名称。可选值为 success、info、warning、danger，也可传自定义图标名string-
iconColor图标颜色string-
iconProps透传 wd-icon 的属性Partial<IconProps>-
inputValuePrompt 输入框初始值string | number-
inputPropsPrompt 模式下 wd-input 属性Partial<InputProps>-
textareaPropsPrompt 模式下 wd-textarea 属性Partial<TextareaProps>-
inputPatternPrompt 输入正则校验规则RegExp-
inputValidatePrompt 输入函数校验规则，返回 boolean 或错误信息字符串(inputValue: string | number) => boolean | string-
inputErrorPrompt 校验失败提示文案string-
showErr是否展示错误信息booleanfalse
actionLayout操作按钮排列方式，可选值为 horizontal、verticalDialogActionLayout'horizontal'
showCancelButton是否显示取消按钮booleanalert 为 false，confirm/prompt 为 true
confirmButtonText确认按钮文案string-
cancelButtonText取消按钮文案string-
confirmButtonProps v1.5.0确认按钮高级配置，支持传字符串、对象或 nullDialogBoxButtonOption{}
cancelButtonProps v1.5.0取消按钮高级配置，支持传字符串、对象或 nullDialogBoxButtonOption由 showCancelButton 推导
actions自定义操作按钮数组，配置后优先级高于确认/取消按钮DialogAction[]-
closeOnClickModal是否支持点击遮罩关闭（返回 action 为 modal）booleanfalse
showClose是否显示右上角关闭按钮booleanfalse
beforeConfirm确认前拦截函数，返回 boolean 或 Promise<boolean>DialogBeforeConfirm-

Attributes ​

wd-dialog 组件实例支持以下属性：

参数说明类型默认值
selector指定唯一标识，用于区分页面中的多个实例string''
root-portal v1.11.0是否脱离页面文档流渲染，用于解决 fixed 失效问题booleanfalse
custom-class根节点自定义类名string''
custom-style根节点自定义样式string''

Slots ​

名称说明参数
header自定义头部区域-
image自定义图片区域-
title自定义标题区域{ icon, title, iconProps }
default自定义内容区域{ msg, type, inputValue, showErr, inputError }
actions自定义操作区{ confirm, cancel, close }

主题定制 ​

CSS 变量 ​

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

名称默认值描述
--wot-dialog-bg$filled-oppo对话框背景色
--wot-dialog-width280px对话框宽度
--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-height340px内容区最大高度
--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文本按钮边框宽度

源代码 ​

文档
 • 组件

Released under the MIT License.

Copyright © 2023-present weisheng

Released under the MIT License.

Copyright © 2023-present weisheng