更新记录

1.0.0（2026-08-12） 下载此版本

1.0.0更新

平台兼容性

uni-app(4.0)

uni-app x(4.0)

ErCodeInput 分段输入框插件

验证码 / 密码 / 车牌号分段输入组件，支持颜色、字号、宽高、圆角自定义，隐秘输入，多种外观样式。兼容 uni-app（Vue2 / Vue3） 与 uni-app x。

安装

将 uni_modules/er-code-input 放入项目即可，支持 easycom 自动引入。

uni-app x

将 components-x/er-code-input/er-code-input.uvue 复制到项目组件目录，或按需引用该 uvue 文件。

组件

快速使用

<template>
  <!-- 验证码 -->
  <er-code-input v-model="code" mode="code" :length="6" only-number box-style="box" @complete="onCode" />

  <!-- 密码 -->
  <er-pwd-input v-model="pwd" :length="6" box-style="underline" />

  <!-- 车牌（普通 7 位 / 新能源 8 位） -->
  <er-plate-input v-model="plate" :energy="false" />
  <er-plate-input v-model="plateNew" energy />
</template>

Vue2 也可使用 :value + @input。

样式 box-style

主要 Props

事件

方法（ref）

• clear() 清空
• focus() 聚焦

示例：自定义外观

<er-code-input
  v-model="code"
  :length="4"
  box-style="soft"
  width="100rpx"
  height="100rpx"
  font-size="48rpx"
  color="#111"
  active-color="#e6a23c"
  bg-color="#f5f7fa"
  password
  mask-char="*"
/>