vue Element ui 验证码倒计时

转载

vue Element ui 实现倒计时_Song_Estelle的博客-优快云博客_elementui倒计时

vue Element ui 实现倒计时

view部分按钮

<div class="verify_timer" @click="sendMsg"  :disabled="canClick">{{ verifyCode }}</div>

script

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




sendMsg() {
    if (this.canClick) return
    this.canClick = true
    this.verifyCode = this.totalTime + 's后重新发送'
    let clock = window.setInterval(() => {
        this.totalTime--
        this.verifyCode = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
            window.clearInterval(clock)
            this.verifyCode = '重新获取验证码'
            this.totalTime = 60
            this.canClick = false
        }
    }, 1000)
},

css

	.verify_timer{
		width: 10.7rem;
		height: 4rem;
		// background-color: pink;
		background: url(../../assets/images/xxxxx.png) 0 0 no-repeat;
		background-size: 100% 100%;
		text-align: center;
		line-height: 4rem;
		font-size: 1.25rem;;
		// font-weight: bold;
		color: #FEFEFF;
		margin-top: 0.5rem;
		cursor: pointer;
	}