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>

1
typed-router.d.ts vendored
View File

@ -24,6 +24,7 @@ declare module 'vue-router/auto-routes' {
'A': RouteRecordInfo<'A', '/a', Record<never, never>, Record<never, never>>,
'AA1': RouteRecordInfo<'AA1', '/a/a1', Record<never, never>, Record<never, never>>,
'AA2': RouteRecordInfo<'AA2', '/a/a2', Record<never, never>, Record<never, never>>,
'AB': RouteRecordInfo<'AB', '/a/b', Record<never, never>, Record<never, never>>,
'ABC': RouteRecordInfo<'ABC', '/a/b/c', Record<never, never>, Record<never, never>>,
'Api': RouteRecordInfo<'Api', '/api', Record<never, never>, Record<never, never>>,
'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,