实现加定时器的vue弹出框

最新推荐文章于 2023-10-21 23:32:27 发布

祎祎呀

最新推荐文章于 2023-10-21 23:32:27 发布

阅读量1.9k

点赞数

分类专栏： vue js

本文链接：https://blog.csdn.net/weixin_47592687/article/details/112984888

版权

vant组件弹出框倒计时自定义组件前端开发

关键词由CSDN通过智能技术生成

vue 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

客户需求，要求在点击弹出框的时候出现一个30倒计时，而vant组件不能够满足我们的这个需求，这个时候怎么办哪。我们只能手写一个弹出框咯！！！！

废话少说，上代码


   //点击此按钮显示弹出框
    <span class="btn-text"   @click="getWelfare">奖品领取</span>
  //弹出框
    <van-popup v-model="showMsg">
          <section class="goods-container" >
          <section class="qr-code" id="qrcode"></section>
          <p class="prize-name">福利详情</p>
          <div class="tip">您已领取福利，请前往【个人中心-中奖记录】中领取奖品。</div>
        </section>
        <div><section class="close"  id="btn" value="确定"  @click="settime">确定&nbsp;&nbsp;<span v-show="second" class="count">{{ count }} s</span></section></div>
        
      </van-popup>

我们还需要在data里面给弹出框的默认值为false,给一会要用到的定时器赋值给一个变量让他不使用的时候给清除掉timer: null

showMsg:false,
timer: null,

在方法里面写一个定时器

settime(){
  this.second=true
  const TIME_COUNT = 30;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            if(this.count==0){
              this.showMsg=false
            }
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
},