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>
|
||||
|
Reference in New Issue
Block a user