Skip to content
On this page

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" use-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() {
  message1
    .confirm({
      title: '评分'
    })
    .then(() => {
      message.alert(`你的评分为:${rate.value}`)
    })
    .catch((error) => {
      console.log(error)
    })
}
scss
:deep(.custom-rate-class) {
  display: block;
  height: 22px;
}

弹框在点击确定和取消按钮时,会返回一个 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组件的 idstring-#wd-message-box-
zIndex弹窗层级number-99-
lazyRender弹层内容懒渲染,触发展示时才渲染内容boolean-true-

外部样式类

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

Released under the MIT License.

Released under the MIT License.