Skip to content

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

属性名说明类型默认值
titleMessageBox 标题string-
messageMessageBox 消息内容string / VNode-
type消息类型success / warning / info / error-
boxType组件类型alert / confirm / promptalert
showCancelButton是否显示取消按钮booleanfalse (confirm/prompt 时为 true)
showConfirmButton是否显示确定按钮booleantrue
cancelButtonText取消按钮的文本内容stringCancel
confirmButtonText确定按钮的文本内容stringConfirm
showClose是否显示关闭图标booleantrue
modal是否显示遮罩层booleantrue
lockScroll是否在 MessageBox 出现时将 body 滚动锁定booleantrue
closeOnClickModal是否可通过点击遮罩层关闭 MessageBoxbooleantrue
closeOnPressEscape是否可通过按下 ESC 键关闭 MessageBoxbooleantrue
beforeCloseMessageBox 关闭前的回调,会暂停实例的关闭function(action, instance, done)-
dangerouslyUseHTMLString是否将 message 属性作为 HTML 片段处理booleanfalse
center是否居中布局booleanfalse
roundButton是否使用圆角按钮booleanfalse
distinguishCancelAndClose是否区分取消和关闭操作booleanfalse
typing特色: 是否启用打字机动画booleanfalse
sound特色: 是否在打开时播放音效booleanfalse
inputPattern输入框的校验表达式RegExp-
inputPlaceholder输入框的占位符string-
inputValidator输入框的校验函数function(value)-
inputErrorMessage校验未通过时的提示文本string-