登录中获取验证码的节流

一. 验证码框

<el-input placeholder="请输入验证码" prefix-icon="el-icon-lock" v-model="ruleForm.code">
    <el-button slot="suffix" :disabled="disabled" type="text" size="mini" @click="checkbtn"> {{ text }}
    </el-button>
</el-input>

二.点击事件

data 中声明

text: "获取验证码",
disabled: false,

methods 事件

checkbtn() {
    this.disabled = true
    let sum = 60
    this.text = sum + 's后在尝试'
    let set
    set = setInterval(() => {
        sum--
        this.text = sum + 's后在尝试'
        if (sum == 0){
            this.disabled = false
            this.text = "获取验证码"
            clearInterval(set)
        }
    }, 1000)
},

是不是很简单！