---

url: 'https://wot-ui.cn/component/use-message.md'

useMessage

用于便捷地调用 MessageBox 弹框组件。

Alert 弹框

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

<wd-message-box></wd-message-box>
<wd-button @click="alert">alert</wd-button>

import { useMessage } from '@/uni_modules/wot-design-uni'
const message = useMessage()

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

Confirm 弹框

用于提示用户操作。

<wd-message-box />
<wd-button @click="confirm">confirm</wd-button>

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 会展示一个输入框，并可以进行输入校验。

<wd-message-box />
<wd-button @click="prompt">prompt</wd-button>

import { useMessage } from '@/uni_modules/wot-design-uni'
const message = useMessage()

function prompt() {
  message
    .prompt({
      title: '请输入邮箱',
      inputPattern: /.+@.+\..+/i,
      inputError: '邮箱格式不正确'
    })
    .then((resp) => {
      console.log(resp)
    })
    .catch((error) => {
      console.log(error)
    })
}

API

Methods

方法名称	说明	参数
show	展示弹框	options
alert	展示 Alert 弹框	options
confirm	展示 Confirm 弹框	options
prompt	展示 Prompt 弹框	options

| close | 关闭弹框 | - |

Options

参数	说明	类型	可选值	默认值