58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
|
|||
|
|
defineProps<{
|
|||
|
|
loading?: boolean
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const open = ref(false)
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'verify', value: (res: boolean) => void): void
|
|||
|
|
(e: 'success', value: (res: boolean) => void): void
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const { counter, reset, pause, resume } = useInterval(1000, { controls: true, immediate: false })
|
|||
|
|
|
|||
|
|
const count = computed(() => {
|
|||
|
|
const res = 60 - counter.value
|
|||
|
|
if (res === 0) {
|
|||
|
|
pause()
|
|||
|
|
reset()
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
if (res === 60) {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
return `（${res}）`
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const verify = () => {
|
|||
|
|
emit('verify', (res) => {
|
|||
|
|
if (res) {
|
|||
|
|
success()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const success = () => {
|
|||
|
|
open.value = false
|
|||
|
|
emit('success', (res) => {
|
|||
|
|
if (res) {
|
|||
|
|
resume()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<!-- <UPopover v-model:open="open" class="h-full" :popper="{ placement: 'top-end' }"> -->
|
|||
|
|
<Button variant="secondary" :disabled="counter > 0" :loading="loading" @click.prevent="verify">
|
|||
|
|
发送验证码{{ count }}
|
|||
|
|
</Button>
|
|||
|
|
<!-- <template #panel>
|
|||
|
|
<Captcha width="300px" height="240px" :max-dot="5" @success="success" />
|
|||
|
|
</template>
|
|||
|
|
</UPopover> -->
|
|||
|
|
</template>
|