实现加定时器的vue弹出框

客户需求，要求在点击弹出框的时候出现一个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);
      }
},

完了之后在点击按钮的时候，满足一定的逻辑判断让他显示就好了