vue Element ui 实现倒计时

1.view部分按钮

<el-button @click="sendMsg" type="primary" :disabled="canClick">{
   
   { content }}</el-button>

2.data数据部分

data() {
    
    
    return {
    
    
   	  content: '发送短信',
      totalTime: 10,
      canClick: false
    }
  }

3.script部分

sendMsg() {
    
    
  if (this.canClick) return
  this.canClick = true
  this.content = this.totalTime + 's后重新发送'
  let clock = window.setInterval(() => {
    
    
    this.totalTime--
    this.content = this.totalTime + 's后重新发送'
    if (this.totalTime < 0) {
    
    
      window.clearInterval(clock)
      this.content = '重新发送短信'
      this.totalTime = 10
      this.canClick = false
    }
  }, 1000)
}