iView拦截Modal对话框方法

2019-08-12  本文已影响0人  FateOfKing

最近做一个公司内部项目,使用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:
            "<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控件的应该都能看懂。不懂的可以留言。

上一篇 下一篇

猜你喜欢

热点阅读