vue Element ui 实现倒计时

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)
}

你可能感兴趣的:(vue,前端,vue)