Meri Plus基础用法
TIP
从设计上来说，
MessageBox的作用是美化系统自带的alert、confirm，因此适合展示较为简单的内容。 如果需要弹出较为复杂的内容，请使用Modal。
包含状态图标的消息弹出框
自定义message内容
全局方法
如果你完整引入了 Element，它会为 app.config.globalProperties 添加如下全局方法：$msgbox、 $alert、 $confirm 。
因此在 Vue 实例中可以采用本页面中的方式来调用MessageBox。 参数如下：
$msgbox(options)$messageBox(options)$alert(options)$confirm(options)
MessageBox Options
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| title | string | — | — | MessageBox 的标题 |
| message | `string | VNode | (() => VNode)` | — |
| close-on-click-modal | boolean | true | false | true | 是否可通过点击遮罩层关闭 MessageBox |
| use-html-string | boolean | true | false | false | 是否将 message 作为 HTML 片段处理 |
| show-cancel-button | boolean | true | false | true | 是否显示取消按钮 |
| show-confirm-button | boolean | true | false | true | 是否显示确定按钮 |
| show-close | boolean | true | false | true | 是否显示关闭按钮 |
| zIndex | number | -- | 0 | 自定义层级 |
| cancel-button-text | string | — | 取消 | 取消按钮的文本内容 |
| confirm-button-text | string | — | 确认 | 确定按钮的文本内容 |
| cancel-button-class | string | — | — | 取消按钮的自定义类名 |
| confirm-button-class | string | — | — | 确定按钮的自定义类名 |
| field | string | confirm | alert | confirm | messageBox的类型 |
| custom-class | string | — | — | MessageBox 的自定义类名 |
| custom-style | CSSProperties | — | — | MessageBox 的自定义内联样式 |
| lock-scroll | boolean | true | false | false | 是否在 MessageBox 出现时将 body 滚动锁定 |
| icon | `string | VNode | (() => VNode)` | — |
| callback | function(action, instance)，action 的值为'confirm', 'modal', 'cancel'或'close', instance 为 MessageBox 实例， 可以通过它访问实例上的属性和方法 | — | — | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 |
| before-close | function(action, instance, done)，action 的值为'confirm', 'modal', 'cancel'或'close', instance 为 MessageBox 实例， 可以通过它访问实例上的属性和方法, done用于关闭 MessageBox 实例 | — | — | — |
| has-loading | boolean | false | — | 使用before-close时是否需要再confirm按钮处增加loading，调用done关闭loading |
| title-hidden | boolean | false | — | 设置title超出后自动换行还是隐藏 |
| transition-name | string | — | 'm-message-box--fade' | 设置动画 |
| size | string | — | 'medium' | 按钮大小 |