循环出来的按钮点击禁用当前按钮60s

335 阅读1分钟

image.png

点击操作中的短信发送按钮,60s内不能重复点击当前的按钮

<el-table-column label="操作" align="center" width="240">
   <template slot-scope="{row}">
    <el-button
      size="mini"
      :disabled="row.status !== 0 || row.surveyStatus !== 1"
      @click="printLabel(row)">打印标签</el-button>
    <el-button
      size="mini"
      type="primary"
      :disabled="row.status !== 0 || row.surveyStatus !== 0 || disabledIds.hasOwnProperty(row.uniqueCode)"
      @click="sendMsg(row)">短信发送</el-button>
  </template>
  // 判断disabledIds里面有没有当前对应的值
</el-table-column>
data() {
   return {
       times: {},
       disabledIds: {}
    }
}
// 发送短信
    async sendMsg(row) {
      const { msg } = await abatchSend({codes: row.uniqueCode}) // 发送短信的接口
      this.$message.success(msg)
      this.$set(this.disabledIds, row.uniqueCode, true) // 当前的点击的值存在对象中
      this.$set(this.times, row.uniqueCode, 60)
      this.timer1(row.uniqueCode);
    },
    timer1(ids) {   // 60s内不能继续点击的函数
      if(this.times[ids] > 0) {
        this.times[ids]--   // 忘记写这个是干嘛了。。。。
        setTimeout(this.timer1,1000, ids)  // 这个也不知道干嘛,反正能实现
      } else{
        this.times[ids] = 0;
        this.$delete(this.disabledIds, ids)
      }
    },