Appearance
MessageBox 消息弹框
模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。
消息提示 Alert
当用户进行操作时会被触发,该对话框中断用户操作,直到用户确认知晓后才可关闭。
确认消息 Confirm
提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。
提交内容 Prompt
当用户进行操作时会被触发,中断用户操作,提示用户输入内容。
打字机效果 (特色)
该组件支持消息内容的打字机动画效果,使其更具动态感和吸引力,适用于叙事或游戏类 UI。
音效反馈 (特色)
您可以启用打开消息框时的音效反馈。这对于警报或严重警告非常有用。
区分取消与关闭
有些场景下,点击取消按钮与点击关闭按钮也有所不同。
居中布局
内容支持居中布局。
全局方法
如果完整注册了 FyoimiyaUI,FyoMessageBox 会作为全局方法 $msgbox, $alert, $confirm, $prompt 注册。
$msgbox(options)$alert(message, title, options)或$alert(message, options)$confirm(message, title, options)或$confirm(message, options)$prompt(message, title, options)或$prompt(message, options)
属性 Options
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | MessageBox 标题 | string | - |
| message | MessageBox 消息内容 | string / VNode | - |
| type | 消息类型 | success / warning / info / error | - |
| boxType | 组件类型 | alert / confirm / prompt | alert |
| showCancelButton | 是否显示取消按钮 | boolean | false (confirm/prompt 时为 true) |
| showConfirmButton | 是否显示确定按钮 | boolean | true |
| cancelButtonText | 取消按钮的文本内容 | string | Cancel |
| confirmButtonText | 确定按钮的文本内容 | string | Confirm |
| showClose | 是否显示关闭图标 | boolean | true |
| modal | 是否显示遮罩层 | boolean | true |
| lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | true |
| closeOnClickModal | 是否可通过点击遮罩层关闭 MessageBox | boolean | true |
| closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | true |
| beforeClose | MessageBox 关闭前的回调,会暂停实例的关闭 | function(action, instance, done) | - |
| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | false |
| center | 是否居中布局 | boolean | false |
| roundButton | 是否使用圆角按钮 | boolean | false |
| distinguishCancelAndClose | 是否区分取消和关闭操作 | boolean | false |
| typing | 特色: 是否启用打字机动画 | boolean | false |
| sound | 特色: 是否在打开时播放音效 | boolean | false |
| inputPattern | 输入框的校验表达式 | RegExp | - |
| inputPlaceholder | 输入框的占位符 | string | - |
| inputValidator | 输入框的校验函数 | function(value) | - |
| inputErrorMessage | 校验未通过时的提示文本 | string | - |