feat: 优化发送验证码按钮,增加加载状态并调整倒计时逻辑
This commit is contained in:
@ -1,10 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<van-button type="primary" @click="triggerCountdown" :disabled="isCounting">
|
<Button
|
||||||
发送验证码
|
:label="`发送验证码${isCounting ? `(${countdownTime}s)` : ''}`"
|
||||||
{{ !isCounting ? '' : `(${countdownTime}s)` }}
|
variant="link"
|
||||||
</van-button>
|
@click="sendSms"
|
||||||
|
:loading="isSending"
|
||||||
|
:disabled="isSending || isCounting"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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>
|
</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>>,
|
'A': RouteRecordInfo<'A', '/a', Record<never, never>, Record<never, never>>,
|
||||||
'AA1': RouteRecordInfo<'AA1', '/a/a1', 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>>,
|
'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>>,
|
'ABC': RouteRecordInfo<'ABC', '/a/b/c', Record<never, never>, Record<never, never>>,
|
||||||
'Api': RouteRecordInfo<'Api', '/api', 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> }>,
|
'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||||
|
Reference in New Issue
Block a user