vue+elementui 实现点击验证码出现60秒倒计时

最新推荐文章于 2025-04-01 16:34:59 发布

九点五亿少女的梦

最新推荐文章于 2025-04-01 16:34:59 发布

阅读量856

点赞数 1

文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/weixin_44856917/article/details/127281592

版权

vue+elementui 实现点击验证码出现60秒倒计时

div部分

 <div class="verCode
 	@click="getVerCode"
	:disabled="disable
	<span>{{buttonName}}</span
</div>

js部分

 <script>
        new Vue({
            el: "#app",
            data: {
                @*获取验证码*@
                buttonName: "获取验证码",
                count: 59,
                disable: false,
               	……省略ruleForm验证
            },
             methods: {
                @*获取手机验证码*@
                getVerCode() {
                    console.log('*', this.ruleForm.phone.length)
                    if (this.ruleForm.phone == '') {
                        this.$message({
                            message: '手机号不能为空',
                            type: 'warning'
                        });
                    } else if (this.ruleForm.phone.length != 11) {
                        this.$message({
                            message: '请输入11位的手机号码',
                            type: 'warning'
                        });
                    } else {
                        @this.abc()   abc方法是点击验证码接口*@
                        console.log('点击了', this.disable)
                        if (this.disable == true) {
                            this.$message({
                                message: '请勿重复点击',
                                type: 'warning'
                            });
                        } else {
                            var timeout = setInterval(() => {
                                if (this.count < 1) {
                                    this.disable = false;
                                    this.buttonName = "获取验证码";
                                    this.count = 59;
                                    clearInterval(timeout);
                                } else {
                                    this.disable = true;
                                    this.buttonName = this.count-- + "s后重发";
                                }
                            }, 1000);
                        }
                    }
                },
			},
		})