iView拦截Modal对话框方法

最近做一个公司内部项目,使用iView框架,遇到了一个问题,弹框关闭之前如果用户有输入数据需要二次确认是否关闭窗口。
多番搜索无果,又去研究了一遍API。好不容易找到了方法,和大家分享一下。
首先看Modal的两个个API
Modal propsvalue 用来显示和关闭弹框的。
Modal eventson-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:
            "

新增流程尚未完成,

是否需要关闭窗口
", okText: "关闭", cancelText: "取消", closable: true, zIndex: 1, onCancel: () => { //重置数据 }, 300); } },

代码解释:resultData是弹框中数据,secondConfirmExit是否二次确认过,modalDisplay控制弹框开启和关闭的value。

Modal写法我就不写了。
熟悉iView的Modal控件的应该都能看懂。不懂的可以留言。

你可能感兴趣的:(iView拦截Modal对话框方法)