【antd-design-vue】a-button 点击按钮置灰10秒后恢复

需求：点击按钮，按钮变成灰色，同时出现倒计时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)
      }