110 lines
2.7 KiB
Markdown
110 lines
2.7 KiB
Markdown
|
# useMessage
|
|||
|
|
|
|||
|
|
用于便捷地调用 MessageBox 弹框组件。
|
|||
|
|
|
|||
|
|
## Alert 弹框
|
|||
|
|
|
|||
|
|
alert 弹框只有确定按钮，用于强提醒。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-message-box></wd-message-box>
|
|||
|
|
<wd-button @click="alert">alert</wd-button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
import { useMessage } from '@/uni_modules/wot-design-uni'
|
|||
|
|
const message = useMessage()
|
|||
|
|
|
|||
|
|
function alert() {
|
|||
|
|
message.alert('操作成功')
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Confirm 弹框
|
|||
|
|
|
|||
|
|
用于提示用户操作。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-message-box />
|
|||
|
|
<wd-button @click="confirm">confirm</wd-button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
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>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
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
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|||
|
|
|-----|------|------|--------|--------|
|
|||
|
|
| title | 标题 | string | - | - |
|
|||
|
|
| msg | 消息文案 | string | - | - |
|
|||
|
|
| type | 弹框类型 | string | alert / confirm / prompt | alert |
|
|||
|
|
| closeOnClickModal | 是否支持点击蒙层进行关闭 | boolean | - | true |
|
|||
|
|
| inputType | 当type为prompt时，输入框类型 | string | - | text |
|
|||
|
|
| inputValue | 当type为prompt时，输入框初始值 | string / number | - | - |
|
|||
|
|
| inputPlaceholder | 当type为prompt时，输入框placeholder | string | - | 请输入内容 |
|
|||
|
|
| inputPattern | 当type为prompt时，输入框正则校验 | RegExp | - | - |
|
|||
|
|
| inputValidate | 当type为prompt时，输入框校验函数 | function | - | - |
|
|||
|
|
| inputError | 当type为prompt时，输入框检验不通过时的错误提示文案 | string | - | 输入的数据不合法 |
|
|||
|
|
| confirmButtonText | 确定按钮文案 | string | - | 确定 |
|
|||
|
|
| cancelButtonText | 取消按钮文案 | string | - | 取消 |
|
|||
|
|
| zIndex | 弹窗层级 | number | - | 99 |
|
|||
|
|
| selector | 指定唯一标识 | string | - | '' |
|