Vue实现一个登录验证60秒倒计时
时间: 2024-01-03 22:04:34 浏览: 24
可以通过Vue的计时器和条件渲染实现一个简单的登录验证60秒倒计时。以下是一个示例代码:
```html
<template>
<div>
<form @submit.prevent="handleSubmit">
<label>
用户名:
<input type="text" v-model="username" />
</label>
<label>
密码:
<input type="password" v-model="password" />
</label>
<button :disabled="isCountingDown">{{ buttonText }}</button>
</form>
<div v-if="isCountingDown">
<p>请稍等{{ countDown }}秒...</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
countDown: 60,
isCountingDown: false,
timer: null,
};
},
computed: {
buttonText() {
return this.isCountingDown ? `请稍等${this.countDown}秒...` : "登录";
},
},
methods: {
handleSubmit() {
// 处理登录逻辑
if (this.username === "admin" && this.password === "password") {
alert("登录成功");
} else {
alert("用户名或密码错误");
this.startCountDown();
}
},
startCountDown() {
this.isCountingDown = true;
this.timer = setInterval(() => {
this.countDown--;
if (this.countDown <= 0) {
clearInterval(this.timer);
this.isCountingDown = false;
this.countDown = 60;
}
}, 1000);
},
},
};
</script>
```
在上面的代码中,我们通过 `isCountingDown` 属性来控制倒计时的渲染,使用计时器来实现倒计时的计算和更新。在登录失败时,我们可以调用 `startCountDown` 方法来触发倒计时的开始。登录成功时,我们不需要做任何处理,计时器会在60秒后自动停止。