在这里插入图片描述

需求:点击按钮,按钮变成灰色,同时出现倒计时10秒,10秒后变回原来的按钮
在这里插入图片描述

首先给按钮添加disabled属性,当绑的值为true的时候禁用
再定义一个时间值

 <a-button type="primary" @click="reportBtn()" class="updateBtn" :disabled="updateDisableFlag">
      <span v-if="updateDisableFlag">上报({{settimer}}")</span>
      <span v-else>上报</span>
 </a-button>
  updateDisableFlag:false,
  settimer:11,

然后在方法中设定时器,最重要的其实也就是定时器。当settimer==1的时候不禁用按钮,并且时间值回到原始,清除定时器。当settimer!==1的时候禁用按钮,时间减减。

 reportBtn() {
      let that = this
      if(that.settimer==1){
        that.updateDisableFlag = false
        that.settimer = 11
        return false
      }else{
        that.updateDisableFlag = true
      that.settimer--;
      }
      setTimeout(function(){
        that.reportBtn() 
      },1000)
    },

朋友分享了另一种写法,亲测有效,标准的清除定时器

 reportBtn() {
      let that = this
      let timer = setInterval(function(){
        that.updateDisableFlag = true
        that.settimer--;
        if(that.settimer==0){
          clearInterval(timer)
        that.updateDisableFlag = false
        that.settimer = 11
        }
      },1000)
      }
Logo

前往低代码交流专区

更多推荐