Skip to content

MessageBox 弹框

弹框有三种:alert、confirm 和 prompt。

Alert 弹框

alert 弹框只有确定按钮,用于强提醒。

html
<wd-message-box></wd-message-box>
<wd-button @click="alert">alert</wd-button>
typescript
import { useMessage } from '@/uni_modules/wot-design-uni'
const message = useMessage()

function alert() {
  message.alert('操作成功')
}

显示标题的 alert 弹框。

html
<wd-message-box />
<wd-button @click="alert">alert</wd-button>
typescript
import { useMessage } from '@/uni_modules/wot-design-uni'
const message = useMessage()

function alert() {
  message.alert({
    msg: '提示文案',
    title: '标题'
  })
}

如果内容文案过长,弹框高度不再增加,而是展示滚动条。

html
<wd-message-box />
<wd-button @click="alert">alert</wd-button>
typescript
import { useMessage } from '@/uni_modules/wot-design-uni'
const message = useMessage()

function alert() {
  message.alert({
    msg: '以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文字是示意以上文',
    title: '标题'
  })
}

Confirm 弹框

用于提示用户操作。

html
<wd-message-box />
<wd-button @click="confirm">confirm</wd-button>
typescript
import { useMessage } from '@/uni_modules/wot-design-uni'
const message = useMessage()

function confirm() {
  message
    .confirm({
      msg: '提示文案',
      title: '标题'
    })
    .then(() => {
      console.log('点击了确定按钮')
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}

Prompt 弹框

prompt 会展示一个输入框,并可以进行输入校验。

html
<wd-message-box />
<wd-button @click="prompt">prompt</wd-button>
typescript
import { useMessage } from '@/uni_modules/wot-design-uni'
const message = useMessage()

function prompt() {
  message
    .prompt({
      title: '请输入邮箱',
      inputValue: value1.value,
      inputPattern: /.+@.+\..+/i
    })
    .then((resp) => {
      console.log(resp)
    })
    .catch((error) => {
      console.log(error)
    })
}

插槽

如果提供的弹框内容不满足需求,可以使用插槽自定义弹框内容。可以通过指定唯一标识selector的方式,在一个页面中使用多个MessageBox,useMessage(selector)会返回一个指定了selector的组件实例。

html
<wd-message-box selector="wd-message-box-slot">
  <wd-rate custom-class="custom-rate-class" v-model="rate" />
</wd-message-box>

<wd-button @click="withSlot">custom</wd-button>
typescript
import { useMessage } from '@/uni_modules/wot-design-uni'
const rate = ref<number>(1)
const message = useMessage('wd-message-box-slot')

function withSlot() {
  message
    .confirm({
      title: '评分'
    })
    .then(() => {
      message.alert(`你的评分为:${rate.value}分`)
    })
    .catch((error) => {
      console.log(error)
    })
}
scss
:deep(.custom-rate-class) {
  display: block;
  height: 22px;
}

确认前置处理

设置 beforeConfirm 函数,在用户选择图片点击确认后,会执行 beforeConfirm 函数,接收 { resolve },开发者可以在确认前进行处理,并通过 resolve 函数告知组件是否确定通过,resolve 接受 1 个 boolean 值,resolve(true) 表示选项通过,resolve(false) 表示选项不通过,不通过时不会完成确认操作。

html
<wd-toast />
<wd-message-box />
<wd-button @click="beforeConfirm">beforeConfirm</wd-button>
typescript
import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
const message = useMessage()
const toast = useToast()

function beforeConfirm() {
  message
    .confirm({
      msg: '是否删除',
      title: '提示',
      beforeConfirm: ({ resolve }) => {
        toast.loading('删除中...')
        setTimeout(() => {
          toast.close()
          resolve(true)
          toast.success('删除成功')
        }, 2000)
      }
    })
    .then(() => {})
    .catch((error) => {
      console.log(error)
    })
}

自定义操作按钮1.5.0

可以通过按钮属性 cancel-button-propsconfirm-button-props 自定义操作按钮的样式,具体参考 Button Attributes

html
<wd-message-box></wd-message-box>
<wd-button @click="withButtonProps">自定义按钮</wd-button>
typescript
function withButtonProps() {
  message
    .confirm({
      msg: '自定义按钮样式',
      title: '提示',
      cancelButtonProps: {
        type: 'error',
        customClass: 'custom-shadow'
      },
      confirmButtonProps: {
        type: 'success',
        customClass: 'custom-shadow'
      }
    })
    .then(() => {})
    .catch((error) => {
      console.log(error)
    })
}
css
:deep() {
  .wd-message-box {
    .custom-shadow {
      box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    }
  }
}

弹框在点击确定和取消按钮时,会返回一个 promise 对象,用 then 接收“确定”按钮事件,用 catch 接收“取消”按钮事件。传入的 action 值为:'confirm'、'cancel'、'modal'。

MessageBox.show(msg)在调用时直接传入字符串,MessageBox.show(options) 在调用时,需传入 options 参数。alert、confirm 和 prompt 都支持快捷调用:

typescript
MessageBox.show(msg)

MessageBox.show(options)

MessageBox.alert(options)

MessageBox.confirm(options)

MessageBox.prompt(options)

Options Attributes

参数说明类型可选值默认值最低版本
title标题string---
msg消息文案string---
type弹框类型stringalert / confirm / promptalert-
closeOnClickModal是否支持点击蒙层进行关闭,点击蒙层回调传入的 action 为'modal'boolean-true-
inputType当 type 为 prompt 时,输入框类型string-text-
inputValue当 type 为 prompt 时,输入框初始值string / number---
inputPlaceholder当 type 为 prompt 时,输入框 placeholderstring-请输入内容-
inputPattern当 type 为 prompt 时,输入框正则校验,点击确定按钮时进行校验regex---
inputValidate当 type 为 prompt 时,输入框校验函数,点击确定按钮时进行校验function---
inputError当 type 为 prompt 时,输入框检验不通过时的错误提示文案string-输入的数据不合法-
confirmButtonText确定按钮文案string-确定-
cancelButtonText取消按钮文案string-取消-
selector指定唯一标识string-#wd-message-box-
zIndex弹窗层级number-99-
lazyRender弹层内容懒渲染,触发展示时才渲染内容boolean-true-
cancel-button-props取消按钮的属性,具体参考 Button Attributesobject--1.5.0
confirm-button-props确定按钮的属性,具体参考 Button Attributesobject--1.5.0

外部样式类

类名说明最低版本
custom-class根节点样式-

源代码

文档
组件

Released under the MIT License.

Released under the MIT License.