vue按钮10S秒后禁用

1、

<el-button icon="el-icon-s-opportunity" type="info" :disabled="abledBut" size="mini" @click="batchVerify" v-hasPermi="['system:buyer:verify']">批量验证买号降权

        </el-button>

        <el-tag style="margin-left:10px" v-if="abledBut">({{setTimeNum}}s)</el-tag>

2、data

         abledBut: false, //是否禁止

      setTimeNum: 10,  // 倒计时时间

      timeWrap: null,  // 定时器标识

3.、监听定时器

watch: {

    setTimeNum (newVal, oldVal) {

      if (newVal < 0) {

        clearInterval(this.timeWrap)

        this.abledBut = false

        this.setTimeNum = 10

      }

    }

  },

4、

 async  batchVerify () {

      const { msg } = await getVerify()

      this.$message({

        type: 'success',

        message: '操作成功'

      })

      if (this.setTimeNum > 0) {

        this.abledBut = true

        this.timeWrap = setInterval(() => {

          this.setTimeNum -= 1

        }, 1000)

      }

    },

5完成点赞  日常模板