vue 倒计时 3秒结束 跳转页面

1,392 阅读1分钟

<div class="app-fixed-bottom">   
 <p class="applyOpening" @click="changeStats">同意协议并授权</p>
</div>
<van-popup v-model="popShow">      
 <div class="popupBox">        
   <img :src="require('@/assets/images/icon-success.png')"/>        
   <p class="title">签约成功</p>       
   <p class="tips"><span>{{count}}秒</span>后返回授权服务窗开通产品页!</p>       
   <van-divider />       
   <p class="back">点击立即返回</p>      
  </div>    
</van-popup>



UI框架用的是vant

js:
data () {    
    return {     
        popShow: false,      
        count:'',//倒计时    
    }  
},  
mounted(){  },  
methods: {    
changeStats(){
      this.popShow = true
      const TIME_COUNT = 3;
      if(!this.timer){
        this.count = TIME_COUNT;
        this.popShow = true;
        this.timer = setInterval(()=>{
          if(this.count > 0 && this.count <= TIME_COUNT){
            this.count--;         
          }else{
           this.popShow = false; 
           clearInterval(this.timer);
            this.timer = null;
            //此处写跳转
          }
        },1000)
      }
    },
  },