美文网首页
iView拦截Modal对话框方法

iView拦截Modal对话框方法

作者: FateOfKing | 来源:发表于2019-08-12 17:30 被阅读0次

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

    相关文章

      网友评论

          本文标题:iView拦截Modal对话框方法

          本文链接:https://www.haomeiwen.com/subject/kwoujctx.html