You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.2 KiB
46 lines
1.2 KiB
<script setup lang="ts">
|
|
defineProps<{
|
|
svg: string
|
|
loading: boolean
|
|
modelValue: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
refresh: []
|
|
'update:modelValue': [value: string]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<UFormField label="Captcha" required>
|
|
<div v-if="svg" class="flex gap-2 items-start">
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<div
|
|
class="flex-1 h-10 border rounded-md overflow-hidden bg-[#f8f9fa]"
|
|
role="img"
|
|
aria-label="CAPTCHA verification code"
|
|
v-html="svg"
|
|
/>
|
|
<UButton
|
|
variant="ghost"
|
|
color="neutral"
|
|
:icon="'i-lucide-refresh-cw'"
|
|
:class="{ 'animate-spin': loading }"
|
|
:disabled="loading"
|
|
square
|
|
aria-label="刷新验证码"
|
|
@click="emit('refresh')"
|
|
/>
|
|
</div>
|
|
<div v-else class="text-sm text-red-500">
|
|
验证码加载失败，
|
|
<button class="underline" @click="emit('refresh')">点此重试</button>
|
|
</div>
|
|
<UInput
|
|
:model-value="modelValue"
|
|
placeholder="Enter the code above"
|
|
class="mt-2"
|
|
@update:model-value="emit('update:modelValue', $event)"
|
|
/>
|
|
</UFormField>
|
|
</template>
|
|
|