仅桌面端保证样式
Msgbox 消息弹窗
命令式弹窗三件套:alert(警告)/ confirm(确认)/ prompt(输入),Promise 化返回结果。适合删除确认、关键操作二次校验等流程性交互;纯展示类弹窗用 Dialog。
三种形态
confirm 确认时 resolve、取消时 reject,用 try/catch 承接;prompt 的确认值带在 value 字段。脚本中通过导入的 EbMsgbox 调用(模板内联表达式也可直接用全局属性 $alert / $confirm / $prompt):
输入校验
prompt 支持 inputPattern 正则与 inputValidator 函数两种校验,校验失败阻止确认并显示错误文案:
区分「取消」与「关闭」
distinguishCancelAndClose 开启后,ESC / 关闭按钮返回 close,取消按钮返回 cancel,两者可分别处理:
HTML 内容与文案定制
html: true 时 message 按 HTML 片段渲染(内容由调用方负责转义,警惕 XSS);confirmButtonText 自定义确认文案,center 居中、showIcon / showClose 控制图标与关闭钮:
prompt 预置输入与校验函数
inputValue 预置输入框初值,inputValidator 返回错误文案即视为不通过,适合带业务规则的输入:
调用形式
三种重载等价,参数可缺位:(message, title?, options?)、(message, options?),也可对象式整体传入 EbMsgbox({ message, title, showCancelButton: true, ... });模板内联可用全局属性 $msgbox / $alert / $confirm / $prompt。
Msgbox Options
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| message / title | 内容与标题 | string | |
| type | 类型图标与配色 | success | warning | info | error | info |
| html | 以 HTML 片段渲染 message(内容由调用方负责转义) | boolean | false |
| showIcon / showClose | 显示类型图标 / 右上角关闭钮 | boolean | true |
| showCancelButton | 显示取消按钮(alert 默认无) | boolean | false |
| distinguishCancelAndClose | 区分取消与关闭动作 | boolean | false |
| confirmButtonText / cancelButtonText | 按钮文案 | string | 确定 / 取消 |
| confirmButtonClass | 确认按钮类型色(同 Button 的 type) | string | primary |
| confirmButtonLoading / cancelButtonLoading | 确认 / 取消按钮 loading(异步校验场景) | boolean | false |
| roundButton / buttonSize | 按钮圆角与尺寸 | boolean / string | false / default |
| center | 内容居中 | boolean | false |
| closeOnClickModal / closeOnPressEscape | 点遮罩 / ESC 关闭 | boolean | true |
| inputType / inputValue / inputPlaceholder | prompt 输入框类型 / 预置值 / 占位文案 | string | |
| inputPattern | 输入正则校验 | RegExp | null |
| inputValidator | 输入校验函数,返回错误文案即视为不通过 | (value) => string | true | null |
| inputErrorMessage | 正则校验失败提示 | string | |
| lockScroll | 弹窗期间锁定页面滚动 | boolean | false |
返回值
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| confirm | 确认按钮 → resolve | Promise<{ action: string, value: string }> | — |
| cancel | 取消按钮 / ESC → reject | Promise<{ action: string, value: string }> | — |
| close | 开启 distinguishCancelAndClose 后,ESC / 关闭钮 → reject,action 为 close | Promise<{ action: string, value: string }> | — |
| prompt.value | 确认时携带输入值 | string |