iview中Modal组件点击确定后验证信息不通过则不关闭弹窗方法

在使用Modal对话框过程中,遇到当点击确定按钮后,即使有检验信息不通过,写了return,弹窗依然关闭了,解决方案如下


    
         


要点分析

添加loading状态,loading初始值为true
手动关闭弹窗this.isTemManageShow = false
JS核心代码

 

   messageWarningFn (text) {
      this.$Message.warning(text)
      setTimeout(() => {
        this.loading = false
        this.$nextTick(() => {
          this.loading = true
        })
      }, 500)
    },
 
    ok () {
      if (!this.addTitle) {
        this.messageWarningFn('请输入名称')
        return
      }
      if (this.addTitle.length > 20) {
        this.messageWarningFn('标题不超过20个文字')
        return
      }
      if (!this.addContent.trim()) {
        this.messageWarningFn('请输入内容')
        return
      }
      // 请求参数
      if (this.templateId2 !== -1) {
        // 更新
      } else {
        // 添加
        for (let i = 0; i < this.templateList.length; i++) {
          if (this.templateList[i].title === this.addTitle) {
            this.messageWarningFn('名称不能重复')
            return
          }
        }
       
      }
      this.isTemManageShow = false
    },

 

你可能感兴趣的:(VUE)