feat: 优化发送验证码按钮,增加加载状态并调整倒计时逻辑
All checks were successful
/ depcheck (push) Successful in 1m28s
/ playwright (push) Successful in 1m6s
/ build-and-deploy-to-vercel (push) Successful in 1m39s

This commit is contained in:
严浩
2024-12-30 14:39:54 +08:00
parent 0b09c3dbb6
commit b46edb4aeb
2 changed files with 21 additions and 5 deletions

View File

@ -1,10 +1,25 @@
<template>
<van-button type="primary" @click="triggerCountdown" :disabled="isCounting">
发送验证码
{{ !isCounting ? '' : `(${countdownTime}s)` }}
</van-button>
<Button
:label="`发送验证码${isCounting ? `(${countdownTime}s)` : ''}`"
variant="link"
@click="sendSms"
:loading="isSending"
:disabled="isSending || isCounting"
/>
</template>
<script setup lang="ts">
const { countdownTime, triggerCountdown, isCounting } = useCountdown(3);
const { countdownTime, triggerCountdown, isCounting } = useCountdown($__DEV__ ? 5 : 60);
const isSending = ref(false);
const sendSms = async () => {
console.debug('[sendSms]');
isSending.value = true;
try {
await new Promise((resolve) => setTimeout(resolve, 1000));
triggerCountdown();
} finally {
isSending.value = false;
}
};
</script>