vue+elementui 实现60秒倒计时功能

<el-form
   class="form-content"
    ref="register"
    :model="register"
    :rules="rules"
    >
    <el-form-item prop="code">
        <el-input v-model="register.code" placeholder="验证码:" style="width: 32%;margin-right: 3%;">el-input>
        <el-button v-show="countshow" style="width: 30%;padding: 12px 0;font-size: 13px;" @click="getcode('register')">获取短信验证码el-button>
        <el-button v-show="!countshow" style="width: 30%;padding: 12px 0;font-size: 13px;" disabled>{{count}} sel-button>
    el-form-item>
el-form>
    data () {
        return {
            countshow:true,
            count:'',
            timer:null,
        }
    },
	methods: {
		// 获取验证码
        async getcode(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                	// 手机号等用户输入的信息校验成功后,开始倒计时
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.countshow = false;
                        this.timer = setInterval(() => {
	                        if (this.count > 0 && this.count <= TIME_COUNT) {
	                        	this.count--;
	                        } else {
		                        this.countshow = true;
		                        clearInterval(this.timer);
		                        this.timer = null;
	                        }
                        }, 1000)
                    }
                    this.codesuccess() // 调用接口获取验证码
                } else {
                    return false;
                }
            });
        },
	}

你可能感兴趣的:(vue,elementui,vue.js,html)