vue前端按钮变灰和3秒后自动启用的案例

<template>
<div>
<form @submit.prevent="handleSubmit">
<!-- 其他表单字段 -->
<button
:disabled="isSubmitting"
:class="{ 'disabled': isSubmitting }"
type="submit"
>
{{ isSubmitting ? 'Submitting...' : 'Submit' }}
</button>
</form>
</div>
</template>

<script>
export default {
data() {
return {
isSubmitting: false,
};
},
methods: {
async handleSubmit() {
this.isSubmitting = true;
try {
// 模拟异步提交请求
await new Promise((resolve) => setTimeout(resolve, 2000));
alert('Form submitted successfully!');
} catch (error) {
console.error('Form submission failed:', error);
} finally {
this.isSubmitting = false;
}
},
},
};
</script>

<style>
.button-disabled {
background-color: #cccccc;
cursor: not-allowed;
}
</style>

在这个示例中：

1. 我们通过 isSubmitting 变量来跟踪提交状态。
2. 在按钮上通过 :disabled="isSubmitting" 控制按钮的禁用状态。
3. 通过 :class="{ 'disabled': isSubmitting }" 赋予按钮特殊的样式，使其在禁用时变灰。
4. 在 handleSubmit 方法中，模拟了一个异步提交请求，使用 setTimeout 来延迟 2 秒（你可以将其替换成实际的异步请求），并在请求完成后重置 isSubmitting 变量。

如果加上倒计时变灰后自动启用：

<template>
<div>
<form @submit.prevent="handleSubmit">
<!-- 其他表单字段 -->
<button
:disabled="isSubmitting"
:class="{ 'button-disabled': isSubmitting }"
type="submit"
>
{{ isSubmitting ? `Submitting... (${countdown}s)` : 'Submit' }}
</button>
</form>
</div>
</template>

<script>
export default {
data() {
return {
isSubmitting: false,
countdown: 3, // 初始倒计时时间为3秒
};
},
methods: {
handleSubmit() {
this.isSubmitting = true;
this.startCountdown();

// 模拟异步提交请求
setTimeout(() => {
alert('Form submitted successfully!');
}, 2000);
},
startCountdown() {
const interval = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
clearInterval(interval);
this.isSubmitting = false;
this.countdown = 3; // 重置倒计时
}
}, 1000);
},
},
};
</script>

<style>
.button-disabled {
background-color: #cccccc;
cursor: not-allowed;
}
</style>

在这个示例中：

1. 增加了一个 countdown 变量来表示倒计时的秒数。
2. 在按钮的文本中显示倒计时 {{ isSubmitting ? \Submitting… (${countdown}s)` : ‘Submit’ }}`。
3. 当用户点击提交按钮时，先设置 isSubmitting 为 true，然后调用 startCountdown 方法。
4. startCountdown 方法使用 setInterval 每秒递减 countdown，并在倒计时结束后重新启用按钮和重置倒计时时间。

这样，当用户点击提交按钮时，按钮将显示倒计时，并在 3 秒后自动重新启用。