最近做一个公司内部项目,使用iView框架,遇到了一个问题,弹框关闭之前如果用户有输入数据需要二次确认是否关闭窗口。
多番搜索无果,又去研究了一遍API。好不容易找到了方法,和大家分享一下。
首先看Modal的两个个API
Modal props
的value
用来显示和关闭弹框的。
Modal events
的on-visible-change
用来监听弹框开启和关闭
思路:
在on-visible-change
监听到弹框关闭并且弹框内有值,那么将value
属性设置为true
阻止关闭,并且用this.$Modal.confirm()
方法弹出新的弹框,让用户处理。
代码片段如下:
Method方法
onVisibleChange(value) {
if (
this.resultData != undefined &&
!value &&
!this.secondConfirmExit
) {
this.modalDisplay = true;
this.$Modal.confirm({
title: "提示",
content:
"<p>新增流程尚未完成,</p><div><span>是否需要</span><span style='color:#ef4836'>关闭窗口</span><span>?</span></div>",
okText: "关闭",
cancelText: "取消",
closable: true,
zIndex: 1,
onCancel: () => {
//重置数据
}, 300);
}
},
代码解释:resultData
是弹框中数据,secondConfirmExit
是否二次确认过,modalDisplay
控制弹框开启和关闭的value。
Modal写法我就不写了。
熟悉iView的Modal控件的应该都能看懂。不懂的可以留言。
网友评论