频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
iview的Modal对话框与表单验证冲突解决
2018-08-08 16:57:48      个评论      
收藏   我要投稿

在iview的modal中,弹出的对话框在点击确定按钮后会立刻关闭当前的对话框,在正常使用这一逻辑是没有问题的,但是如果modal中包括表单验证,或者其他需要自定义关闭当前对话框的操作时就会变得捉襟见肘。因此,实现对话框的异步关闭是必须要实现的。
然而通过对iview官方文档的阅读,modal中提供的实现异步关闭的loading属性在使用后虽然对话框仍然处于显示状态,但确定按钮始终处于加载状态,但已经影响到业务逻辑。
官方给出的解决办法如下


<script>
    export default {
        data () {
            return {
                modal1: false,
                loading: true
            }
        },
        methods: {
            ok () {
                this.$Message.info('异步验证数据');
                setTimeout(() => {
                    this.loading = false;
                    this.$nextTick(() => {
                        this.loading = true;
                    });
                }, 2000);
            }
        }
    }
</script>
结合iview的表单验证以及业务逻辑,大致修改如下
html内容

 


    
data() {
   return {
        isRefuse: false,// 驳回申请模态
        refuseLoading: true,
        refuse: {
          refuseMsg: &龙8国际娱乐pt老虎机39;&龙8国际娱乐pt老虎机39;,// 驳回理由
        },
        rules: {
          refuseMsg: [{required: true, message: &龙8国际娱乐pt老虎机39;请输入驳回理由&龙8国际娱乐pt老虎机39;, trigger: &龙8国际娱乐pt老虎机39;blur&龙8国际娱乐pt老虎机39;}]
        }
   }
},
methods:{
     //  拒绝
      patRefuse() {
        this.$refs.refuse.validate((valid) => {// 表单验证
          if (valid) {
            pat.patRefuse(this.refuse).then(res => {
              this.$Message.success(res.msg);
              this.refuseLoading = false;// 关闭加载状态
              this.isRefuse = false;// 关闭当前模态
            }).catch(() => {
              this.isRefuse = false;
              this.refuseLoading = false;
            });
            this.refuseLoading = false;
            this.isRefuse = false;
          } else {
              // 划重点 $nextTick 在下次 DOM 更新循环结束之后执行延迟回调...
            setTimeout(() => {
              this.refuseLoading = false;
              this.$nextTick(() => {
                this.refuseLoading = true;
              });
            }, 1000);
          }
        });
      }
}
点击复制链接 与好友分享!回本站首页
上一篇:小程序列表标题吸顶教程
下一篇:vue格式化时间戳解析
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站

龙8国际娱乐pt老虎机