Theme Documentation

<VerificationCodeInput v-model="code" required />

<VerificationCodeInput :model-value="'123456'" />

<VerificationCodeInput v-model="code" :can-send="false" />

<VerificationCodeInput v-model="code" :loading="true" />

<template>
  <VerificationCodeInput 
    v-model="code" 
    :sent-at="sentTime" 
    :countdown-duration="30"
  />
</template>

<script setup>
const code = ref('')
const sentTime = ref(Date.now()) // 当前时间戳，表示刚刚发送
</script>

<form @submit.prevent="handleSubmit">
  <PhoneInput v-model="phone" required />
  <VerificationCodeInput 
    v-model="code" 
    :can-send="isValidPhone" 
    :loading="sending"
    :sent-at="sentTime"
    @send-code="handleSendCode" 
  />
  <Button type="submit">登录</Button>
</form>

<script setup>
const phone = ref({ phonePrefix: '86', phoneNumber: '' })
const code = ref('')
const sending = ref(false)
const sentTime = ref(0)

// 检查手机号是否有效
const isValidPhone = computed(() => {
  return phone.value.phoneNumber.length >= 8
})

async function handleSendCode() {
  sending.value = true
  try {
    // 模拟API请求发送验证码
    await new Promise(resolve => setTimeout(resolve, 1000))
    sentTime.value = Date.now() // 更新发送时间
  } finally {
    sending.value = false
  }
}

function handleSubmit() {
  // 处理登录提交
  console.log('手机号:', phone.value)
  console.log('验证码:', code.value)
}
</script>