更新记录

1.0.0（2025-08-01） 下载此版本

短信验证码输入框 样式支持：1-下边框，2-全边框，3-无边框

平台兼容性

uni-app(4.06)

uni-app x(4.06)

其他

# PhoneCode 验证码输入组件使用文档

## 组件简介
PhoneCode 是一个美观易用的验证码输入组件，支持多种边框样式：1-下边框，2-全边框，3-无边框

## 基本用法

```vue
<template>
  <phone-code ref="phoneCodeRef" 
              @code-completed="handleInputCompleted"
              @input-change="handleInputChange">
  </phone-code>
</template>

<script>
export default {
  methods: {
    handleInputCompleted(completeCode) {
      // 验证码输入完成时触发
      console.log('完整验证码:', completeCode)
    },
    handleInputChange(partialCode) {
      // 验证码输入变化时触发
      console.log('当前输入:', partialCode)
    }
  }
}
</script>

属性说明

事件说明

样式示例

1. 默认样式（下边框）

<phone-code></phone-code>

2. 全边框样式

<phone-code :borderType="2"></phone-code>

3. 自定义颜色全边框样式

<phone-code :borderType="2" 
           borderDefaultColor="#000000" 
           borderFocusColor="#70DB93"
           inputType="text">
</phone-code>

4. 无边框样式

<phone-code :borderType="3"></phone-code>

方法说明

通过 ref 可以调用组件方法：

版本记录

• v1.0.0 (2025-08-01): 首次发布