VUE——验证码倒计时

最新推荐文章于 2024-06-25 12:02:02 发布

weixin_58412143

最新推荐文章于 2024-06-25 12:02:02 发布

阅读量364

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_58412143/article/details/126136379

版权

<el-form-item prop="Code" class="codeF">
									<el-input class="Code-btnf" v-model="ruleForm.Code" placeholder="请输入验证码"></el-input>
									<el-button type="primary" @click="getCode" class="Code-btn" :disabled="!canClick">
										{{ this.getCodeTitle }}
									</el-button>
</el-form-item>


canClick: true, // 验证码是否禁用
				totalTime: 60,
				getCodeTitle:'获取验证码',
		

//倒计时
			verificationCode() {
			 if (!this.canClick) return
				this.canClick = false
				this.getCodeTitle = this.totalTime + 's后重新发送'
				let clock = window.setInterval(() => {
					this.totalTime--
					this.getCodeTitle = this.totalTime + 's后重新发送'
					if (this.totalTime < 0) {
						window.clearInterval(clock)
						this.getCodeTitle = '重新发送验证码'
						this.totalTime = 60
						this.canClick = true
					}
				}, 1000)
			},