更新记录

v0.1.0（2026-03-07） 下载此版本

优化前置输入参数，增加 accountPlaceholder 自定义提示

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

首次上传

平台兼容性

uni-app(3.6.18)

验证码输入框组件 (input-verify-code)

组件介绍

input-verify-code 是一个验证码输入框组件，支持手机号/邮箱输入验证、验证码获取和倒计时功能。

组件属性

组件事件

组件方法

使用示例

<script setup>
import { ref } from 'vue'
import inputVerifyCode from '@/components/wot/form/input-verify-code.vue'

const account = ref('')
const code = ref('')

function handleAccountInput(e) {
  console.info('手机号输入:', e.detail.value)
}

function handleCodeInput(value) {
  console.info('验证码输入:', value)
}

function handleSendCode(account) {
  console.info('发送验证码到:', account)
  uni.showToast({
    title: '验证码已发送',
    icon: 'success',
  })
}

function handleFocus() {
  console.info('输入框聚焦')
}

function handleBlur() {
  console.info('输入框失焦')
}
</script>

<template>
  <view class="demo-container">
    <view class="title">
      验证码输入框示例
    </view>

    <view class="form-item">
      <view class="label">
        手机号
      </view>
      <input v-model="phone" type="number" placeholder="请输入手机号" @input="handleAccountInput">
    </view>

    <view class="form-item">
      <view class="label">
        验证码
      </view>
      <input-verify-code
        v-model="code" :account="account" :account-required="true" account-placeholder="请输入手机号"
        :count-down-time="30" placeholder="请输入验证码" :btn-inside="true" @send-code="handleSendCode"
        @input="handleCodeInput" @focus="handleFocus" @blur="handleBlur"
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.demo-container {
  padding: 40rpx;
  background-color: #fff;
  min-height: 100vh;
}

.demo-container .title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  text-align: center;
}

.demo-container .form-item {
  margin-bottom: 30rpx;
}

.form-item .label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.form-item input {
  height: 85rpx;
  background-color: #f5f6f9;
  border-radius: 10rpx;
  border: 1rpx solid #e0e0e0;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.form-item input:focus-within {
  border: 1rpx solid #9898ff;
}
</style>

注意事项

1. 当 accountRequired 为 true 时，必须输入账号才能发送验证码
2. 发送验证码后会自动开始倒计时，倒计时期间无法再次发送
3. 组件支持通过 v-model 双向绑定验证码值
4. 可以通过 btnInside 属性控制发送按钮的位置，设置为 true 时按钮会显示在输入框内部
5. 组件暴露了 reset、startCountDown 和 resetCountDown 方法，可通过 ref 调用