# message-box (w-message-box)

- **Import**: `WMessageBox` from `win-design-next`
- **Tag**: `<w-message-box>`
- **说明**: MessageBox 二次确认框
- **分类**: feedback
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/message-box.md`

## API

## API

### 配置项

| 属性名                    | 说明                                                                                                                                                  | 类型                                                                               | 默认值                                          |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------- |
| autofocus                 | 打开 MessageBox 时是否自动获得焦点                                                                                                                    | ^[boolean]                                                                         | true                                            |
| title                     | MessageBox 的标题                                                                                                                                     | ^[string]                                                                          | ''                                              |
| message                   | MessageBox 的正文内容                                                                                                                                 | ^[string] / ^[VNode] / ^[Function]`() => VNode`                                    | —                                               |
| dangerouslyUseHTMLString  | 是否将 `message` 作为 HTML 片段处理                                                                                                                   | ^[boolean]                                                                         | false                                           |
| type                      | 消息类型，用于图标显示                                                                                                                                | ^[enum]`'success' \| 'info' \| 'warning' \| 'error' \| 'danger' \| 'primary'`      | ''                                              |
| icon                      | 自定义图标组件，会覆盖 `type` 的类型                                                                                                                  | ^[string] / ^[Component]                                                           | ''                                              |
| customClass               | MessageBox 的自定义类名                                                                                                                               | ^[string]                                                                          | ''                                              |
| customStyle               | MessageBox 的自定义内联样式                                                                                                                           | ^[CSSProperties]                                                                   | {}                                              |
| modalClass                | 遮罩的自定义类名                                                                                                                                      | string                                                                             | —                                               |
| callback                  | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调                                                                                          | ^[Function]`(value: string, action: Action) => any \| (action: Action) => any`     | null                                            |
| showClose                 | MessageBox 是否显示右上角关闭按钮                                                                                                                     | ^[boolean]                                                                         | true                                            |
| beforeClose               | messageBox 关闭前的回调，会暂停消息弹出框的关闭过程。                                                                                                 | ^[Function]`(action: Action, instance: MessageBoxState, done: () => void) => void` | null                                            |
| distinguishCancelAndClose | 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分                                                                         | ^[boolean]                                                                         | false                                           |
| lockScroll                | 是否在 MessageBox 出现时将 body 滚动锁定                                                                                                              | ^[boolean]                                                                         | true                                            |
| showCancelButton          | 是否显示取消按钮                                                                                                                                      | ^[boolean]                                                                         | false（以 confirm 和 prompt 方式调用时为 true） |
| showConfirmButton         | 是否显示确定按钮                                                                                                                                      | ^[boolean]                                                                         | true                                            |
| cancelButtonText          | 取消按钮的文本内容                                                                                                                                    | ^[string]                                                                          | 取消                                            |
| confirmButtonText         | 确定按钮的文本内容                                                                                                                                    | ^[string]                                                                          | 确定                                            |
| cancelButtonLoadingIcon   | 取消按钮的加载图标内容                                                                                                                                | ^[string] / ^[Component]                                                           | Loading                                         |
| confirmButtonLoadingIcon  | 确认按钮的加载图标内容                                                                                                                                | ^[string] / ^[Component]                                                           | Loading                                         |
| cancelButtonClass         | 取消按钮的自定义类名                                                                                                                                  | ^[string]                                                                          | ''                                              |
| confirmButtonClass        | 确定按钮的自定义类名                                                                                                                                  | ^[string]                                                                          | ''                                              |
| closeOnClickModal         | 是否可通过点击遮罩层关闭 MessageBox                                                                                                                   | ^[boolean]                                                                         | true（以 alert 方式调用时为 false）             |
| closeOnPressEscape        | 是否可通过按下 ESC 键关闭 MessageBox                                                                                                                  | ^[boolean]                                                                         | true（以 alert 方式调用时为 false）             |
| closeOnHashChange         | 是否在 hash 改变时关闭 MessageBox                                                                                                                     | ^[boolean]                                                                         | true                                            |
| showInput                 | 是否显示输入框                                                                                                                                        | ^[boolean]                                                                         | false（以 prompt 方式调用时为 true）            |
| inputPlaceholder          | 输入框占位文本                                                                                                                                        | ^[string]                                                                          | ''                                              |
| inputType                 | 输入框的类型                                                                                                                                          | ^[string]                                                                          | text                                            |
| inputValue                | 输入框的初始文本                                                                                                                                      | ^[string]                                                                          | null                                            |
| inputPattern              | 输入框的校验表达式                                                                                                                                    | ^[regexp]                                                                          | null                                            |
| inputValidator            | 输入框的校验函数。 应该返回一个 boolean 或者 string， 如果返回的是一个 string 类型，那么该返回值会被赋值给 inputErrorMessage 用于向用户展示错误消息。 | ^[Function]`(value: string) => boolean \| string`                                  | null                                            |
| inputErrorMessage         | 校验未通过时的提示文本                                                                                                                                | ^[string]                                                                          | 输入的数据不合法!                               |
| center                    | 是否居中布局                                                                                                                                          | ^[boolean]                                                                         | false                                           |
| draggable                 | MessageBox 是否可拖放                                                                                                                                 | ^[boolean]                                                                         | false                                           |
| overflow                  | MessageBox 拖动范围可以超出可视区                                                                                                                     | ^[boolean]                                                                         | false                                           |
| roundButton               | 是否使用圆角按钮                                                                                                                                      | ^[boolean]                                                                         | false                                           |
| buttonSize                | 自定义确认按钮及取消按钮的大小                                                                                                                        | ^[string]`'small' \| 'default' \| 'large' \| 'mini'`                               | small                                           |
| appendTo                  | 设置组件的根元素                                                                                                                                      | ^[string] / ^[HTMLElement]                                                         | —                                               |
