feat: 优化发送验证码按钮,增加加载状态并调整倒计时逻辑
This commit is contained in:
@ -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
1
typed-router.d.ts
vendored
@ -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> }>,
|
||||
|
Reference in New Issue
Block a user