MsgBox 弹出框

MsgBox 概述

模态对话框，在浮层中显示，引导用户进行相关操作。
MsgBox 提供了两种用法，普通组件使用和封装好的简洁实例调用。

MsgBox 代码示例

基础用法

最简单的使用方法，通过控制属性 visible 来显示/隐藏对话框。
可以使用 v-model 实现双向绑定。
默认按键盘 ESC 键也可以关闭。

自定义样式

Msgbox 组件提供了灵活的自定义样式 API 和 Slot，可以自由控制整个 Msgbox 的各个组成部分，比如页头、页脚、关闭按钮。
通过和其它组件的交互，能实现更复杂的功能，满足了大多业务场景。

TIP

注意：自定义页脚，可以自定义取消和确定按钮，可以实现点击取消和确定按钮时关闭或者不关闭弹窗，实现自己的业务逻辑

beforeOkClose 实现异步关闭/保留弹窗

beforeOkClose 在点击 ok 按钮之后关闭弹窗前调用的函数，根据 beforeOkClose 的返回值来决定是否关闭弹窗
若配置了 beforeOkClose，又在外层监听了 on-ok 事件，beforeOkClose 的执行逻辑在 on-ok 事件之前
建议用 beforeOkClose 来实现异步关闭弹窗，不建议用 on-ok 事件来异步关闭弹窗
beforeOkClose 方法可与 loading 属性一起使用来实现异步关闭/保留弹窗功能
友情提示：除了用 beforeOkClose 来实现弹窗的异步关闭/保留，插槽 (slot="footer") 也是一个非常推荐的方式，可参考自定义取消和确定按钮 demo

实例调用 beforeOkClose 实现异步关闭/保留弹窗

beforeOkClose 方法可与 loading 属性一起使用来实现异步关闭/保留弹窗功能

页面滚动

配置属性 scrollable 为 true，弹出对话框后页面还可以滚动.配置属性 transfer 为 false，弹出框不放在 body 内。

禁用关闭

可以禁用关闭和遮罩层关闭。

自定义位置

可以自定义 Msgbox 的对话框样式 以及 对话框 Wrap 的 class 名称，从而实现更多自定义的样式，比如垂直居中。

基本用法

四种基本的对话框，只提供一个确定按钮。

确认对话框

快速弹出确认对话框，并且可以自定义按钮文字及异步关闭。

自定义内容

使用 render 字段可以基于 Render 函数来自定义内容。
使用 render 后，将不再限制类型，content 也将无效。
📺 学习 Render 函数的内容 (opens new window)

beforeOkClose 实例调用

MsgBox API

Msgbox props

属性	说明	类型	默认值
value	对话框是否显示，可使用 v-model 双向绑定数据。	Boolean	false
title	对话框标题，如果使用 slot 自定义了页头，则 title 无效	String	-
closable	是否显示右上角的关闭按钮，关闭后 Esc 按键也将关闭	Boolean	true
mask-closable	是否允许点击遮罩层关闭	Boolean	true
loading	点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动设置visible来关闭对话框	Boolean	false
scrollable	页面是否可以滚动	Boolean	false
ok-text	确定按钮文字	String	确定
cancel-text	取消按钮文字	String	取消
width	对话框宽度，对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，宽度会变为自动auto。当其值不大于 100 时以百分比显示，大于 100 时为像素	Number | String	520
height	对话框内容高度，超出显示纵向滚动条，单位 px(此属性仅在 v1.0.14 或以上版本有效) 当其值不大于 100 时以百分比显示，大于 100 时为像素(v1.0.37)	Number | String	-
top	对话框距离顶部的距离，默认 100(此属性只在 1.0.9 或以上版本有效)	Number | String	100
escClose	设置弹框是否可以通过 esc 键盘关闭(此属性只在 1.0.9 或以上版本有效)	Boolean	false
canDrag	设置弹框是否可以拖动(只在表头存在时生效)(此属性只在 1.0.9 或以上版本有效)	Boolean	true
isBeyond	设置弹窗拖拽是否可以将弹框向右下拖出屏幕(此属性只在 1.0.10 或以上版本有效)	Boolean	false
zIndex	设置弹框的定位层次(不推荐使用)(此属性只在 1.0.9 或以上版本有效)	Number	1000
styles	设置浮层样式，调整浮层位置等，该属性设置的是.h-msgbox的样式	Object	-
class-name	设置对话框容器.h-msgbox-wrap的类名，可辅助实现垂直居中等自定义效果	String	-
transition-names	自定义显示动画，第一项是模态框，第二项是背景	Array	['ease', 'fade']
transfer	是否将弹层放置于 body 内	Boolean	true
isOriginal	弹框拖动后再次打开是否将弹框放回初始位置（此属性只在 1.0.14 或以上版本有效）	Boolean	false
maximize	是否添加最大化按钮和恢复原始大小按钮，提供最大化/恢复原始大小功能（此属性只在 1.0.17 或以上版本有效）	Boolean	false
footerHide	是否隐藏 footer(此属性只在 1.0.19 或以上版本有效)	Boolean	false
left	面板打开时距离左侧的宽度，不设置时面板居中打开（v1.0.27）	Number/String	--
closeDrop	弹出框拖动时是否关闭内部表单组件的弹框（v1.0.27）	Boolean	false
disableTabEvent	当弹框打开时，禁用 Tab 键在遮罩层下焦点的选中行为（v1.0.35）	Boolean	false
maskTop	遮罩层距离顶部高度（v1.0.36）	Number/String	null
maskLeft	遮罩层距离左侧距离（v1.0.36）	Number/String	null
beforeEscClose	escClose 触发前调用的函数，返回 Boolean，Boolean 值决定弹窗是否关闭（v1.0.37）	Function	() => true
lazyload	是否开启弹窗内容懒加载。开启以后弹窗内容在首次打开时加载（v1.0.38）	Boolean	false
maxHeight	对话框内容最大高度，超出显示纵向滚动条，单位 px(v1.0.39)	Number | String	-
isOkLeft	确认按钮是否居左（v1.0.60）	Boolean	false
allowCopy	内部文本是否允许复制（v1.0.70 版本及以上有效）	Boolean	false
beforeOkClose	在点击 ok 按钮关闭弹窗前触发调用的函数，支持同步或者异步状态， 同步状态时返回 Boolean， Boolean 值为 true 时关闭弹窗，为 false 时保留弹窗， 异步状态（提交后台接口）时返回 promise，resolve(true)时关闭弹窗，resolve(false)时保留弹窗（可参考 demo）（v1.1.0）	Function	--
dropdown	关于msgbox弹窗关闭或者移动后，内部相关联的dropdown是否关闭，重新点击展开、停止移动是否需要全部显示tip v1.11.2 dropdown: { trigger: [], show: true} trigger:表示触发方式 ['drag','close']（可动态配置） drag 拖拽弹窗；close 弹窗关闭 show: 性 当trigger包含当【drag 或者 close】的行为时，表示msgbox关闭或者移动后（内部drop全部关闭后），再次展开，是否重新展示含有错误提示的tips 注意：show 针对form表单的错误提示,其他drop不生效 注意：当前属性主要针对在msgbox弹窗内，form表单内form-item或者表单控件设置transfer后，关闭表单或者拖拽表单后，其下拉drop没有响应或者没有关闭的问题	Object	{ trigger: [], show: true }

Msgbox events

事件名	说明	返回值
on-ok	点击确定的回调	无
on-cancel	点击取消的回调	无
on-close	点击关闭按钮时回调用，closable 为 true 时调用	无
on-maximize	点击放大按钮时回调用（v1.0.28）	true/false
on-open	打开弹窗时触发（v1.0.38）	-

TIP

注意:1.0.10 版本 on-cancle 和 on-close 正式分开，之前取消回调和关闭回调都是 on-cancle

Msgbox slot

名称	说明
header	自定义页头
footer	自定义页脚内容
close	自定义右上角关闭内容
无	对话框主体内容

Msgbox instance

通过直接调用以下方法来使用：

• this.$hMsgBox.info(config)
• this.$hMsgBox.success(config)
• this.$hMsgBox.warning(config)
• this.$hMsgBox.error(config)
• this.$hMsgBox.confirm(config)
• this.$hMsgBox.default(config)

以上方法隐式地创建及维护 Vue 组件。参数 config 为对象，具体说明如下：

属性	说明	类型	默认值
title	标题	String | Element String	-
content	内容	String | Element String	-
render	自定义内容，使用后不再限制类型， content 也无效。📺 学习 Render 函数的内容 (opens new window)	Function	-
width	宽度，单位 px	Number | String	416
height	对话框内容高度，超出显示纵向滚动条，单位 px(此属性仅在 v1.0.14 或以上版本有效)	Number | String	-
okText	确定按钮的文字	String	确定
cancelText	取消按钮的文字，只在hMsgbox.confirm()下有效	String	取消
loading	点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动调用hMsgbox.remove()来关闭对话框	Boolean	false
scrollable	页面是否可以滚动	Boolean	false
onOk	点击确定的回调	Function	-
onCancel	点击取消的回调，只在hMsgbox.confirm()下有效	Function	-
zIndex	弹窗层级(此属性只在 v1.0.19 版本及以上有效)	Number	1000
isOkLeft	确认按钮是否居左（v1.0.30）	Boolean	false
okIcon	确认按钮图标,isOkLeft 为 true 时使用（v1.0.30）	String	--
cancelIcon	取消按钮图标，isOkLeft 为 true 时使用（v1.0.30）	String	--
closable	是否显示右上角的关闭按钮(1.0.37)	Boolean	false
maskClosable	是否允许点击遮罩层关闭(1.0.37)	Boolean	false
top	对话框距离顶部的距离(1.0.37)	Number/String	100
maximize	是否添加最大化按钮和恢复原始大小按钮，提供最大化/恢复原始大小功能(1.0.37)	Boolean	false
styles	设置浮层样式，调整浮层位置等，该属性设置的是.h-msgbox 的样式(1.0.37)	Object	{}
className	设置对话框容器.h-msgbox-wrap 的类名，可辅助实现垂直居中等自定义效果(1.0.37)	String	''
transitionNames	是否允许点击自定义显示动画，第一项是模态框，第二项是背景遮罩层关闭(1.0.37)	Array	['ease', 'fade']
disableTabEvent	当弹框打开时，禁用 Tab 键在遮罩层下焦点的选中行为(1.0.37)	Boolean	false
maskTop	遮罩层距离顶部高度(1.0.37)	Number | String | null	null
maskTop	遮罩层距离左侧距离(v1.0.37)	Number | String | null	null
cancelType	取消按钮的样式(v1.0.51)	String	text
allowCopy	内部文本是否允许复制（v1.0.70 版本及以上有效）	Boolean	false
beforeOkClose	在点击 ok 按钮关闭弹窗前触发调用的函数，支持同步或者异步状态， 同步状态时返回 Boolean，Boolean 值为 true 时关闭弹窗，为 false 时保留弹窗， 异步状态（提交后台接口）时返回 promise，resolve(true)时关闭弹窗，resolve(false)时保留弹窗（可参考 demo）（v1.1.0）	Function	--

另外提供了全局关闭对话框的方法：

• this.$hMsgBox.remove()