更新记录

v0.0.1（2026-03-06） 下载此版本

首次上传

平台兼容性

uni-app(3.6.17)

input-sms-verify-code

一个基于 UniApp 的短信验证码验证码输入框组件，通过 Wot UI 组件实现

依赖说明

本组件依赖 Wot UI，请先前去安装

功能特性

• 验证码输入
• 内置/外置发送按钮
• 倒计时功能
• 手机号验证
• 支持禁用/只读状态

使用示例

<template>
  <input-verify-code
    v-model="code"
    :phone="phone"
    :phone-required="true"
    :count-down-time="30"
    placeholder="请输入验证码"
    :btn-inside="true"
    @send-code="handleSendCode"
    @input="handleInput"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import inputVerifyCode from '@/components/input-verify-code/input-verify-code.vue'

const phone = ref('')
const code = ref('')

function handleSendCode(phoneNumber: string) {
  console.log('发送验证码到:', phoneNumber)
}

function handleInput(value: string) {
  console.log('验证码输入:', value)
}
</script>

API

参数

事件

方法

通过 ref 调用组件实例方法：

<template>
  <input-sms-verify-code ref="verifyCodeRef" />
</template>

<script setup lang="ts">
const verifyCodeRef = ref()

function handleReset() {
  verifyCodeRef.value?.reset()
}

function handleStartCountDown() {
  verifyCodeRef.value?.startCountDown()
}
</script>

许可协议

MIT License，请查看项目根目录下的 LICENSE 文件。