学无先后,达者为师

网站首页 Vue 正文

Vue+Vant组件库提交表单实现上传图片后当加载loading超过一分钟后,设置定时器提示网络错误

作者:.WYc 更新时间: 2022-03-01 Vue

前言:这次的项目中遇到了一个需求为:提交表单实现上传图片后当加载loading超过一分钟后,提示提示网络不好,不在页面一直显示loading图标,所以用到了定时器.

如下图:

1.找到按钮绑定的点击事件@click.native="handleClick"

    <div class="addSuggset-submit">
      <button-big class="addSuggset-handle"
                  content="立即提交"
                  @click.native="handleClick" />
    </div>

2.在script中声明一个count、intervalId

  data () {
    return {
      count: 0,
      intervalId:null
    }
  }

3.再到点击方法中添加定时器,每隔1秒count增加1,再判断如果count大于20秒就提示网络错误,最后清除定时器

 handleClick () {
                this.intervalId = setInterval(() => {
                this.count += 1
                }, 1000)   

                if (this.count > 20) {
                  this.$toast("请检查您的网络!");
                   clearInterval(this.intervalId);
                   this.intervalId = null;
                   this.count = 0;
                }
            }

 

原文链接:https://blog.csdn.net/weixin_42675298/article/details/102560774

栏目分类
最近更新