最近做一个公司内部项目，使用iView框架，遇到了一个问题，弹框关闭之前如果用户有输入数据需要二次确认是否关闭窗口。
多番搜索无果，又去研究了一遍API。好不容易找到了方法，和大家分享一下。
首先看Modal的两个个API
Modal props的value 用来显示和关闭弹框的。
Modal events的on-visible-change 用来监听弹框开启和关闭

思路：
在on-visible-change监听到弹框关闭并且弹框内有值，那么将value 属性设置为true阻止关闭，并且用this.$Modal.confirm()方法弹出新的弹框，让用户处理。

代码片段如下：
Method方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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控件的应该都能看懂。不懂的可以留言。