VUE 验证码倒计时 防止重复点击

html

<button :disabled=!this.canClick >{{cutNUm}}</button>

JS

// 定时器全局变量
var time = ''
export default {
        data () {
            return {
                cutNUm:'获取验证码',
                canClick: true
            }
        },
        methods:{
             // 短信验证码
            cutDown () {
                if (!this.canClick) return
                this.canClick = false
                this.cutNUm = 60
                time = setInterval(() => {
                    this.cutNUm--
                    if (this.cutNUm === 0) {
                    this.cutNUm = '获取验证码'
                    this.canClick = true
                    clearInterval(time)
                    }
                }, 1000)
            }, 
        }
}
发表新评论