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

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

<Modal
  v-model="isTemManageShow"
  title="管理模板"
  @on-ok="ok"
  :loading="loading"
  @on-cancel="cancel">
    <div class="mb10">
      <!-- your content -->
    </div>
</Modal>

要点分析

添加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
    },