CodeInput 验证码输入

多位验证码逐格输入，支持密码遮罩和自定义长度

多位验证码逐格输入，支持密码遮罩

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-code-input class="demo-default" />

<!-- 预设值 -->
  <re-code-input class="demo-value" :value="123456" />

<!-- 自定义长度 -->
  <re-code-input class="demo-length-4" :length="4" />
  <re-code-input class="demo-length-6" :length="6" />

<!-- 密码遮罩 -->
  <re-code-input class="demo-mask" :mask="true" :value="123456" />
  <re-code-input class="demo-no-mask" :mask="false" :value="654321" />

<!-- 禁用状态 -->
  <re-code-input class="demo-disabled" :disabled="true" :value="888888" />

<!-- 自动聚焦 -->
  <re-code-input class="demo-focus" :focus="true" />

<!-- 部分输入 -->
  <re-code-input class="demo-partial" :value="123" :length="6" />

<!-- 遮罩与长度组合 -->
  <re-code-input class="demo-mask-length" :mask="true" :length="4" :value="99" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-code-input />。

API

CodeInput Props

名称类型默认值描述必传
valuestring | number""输入值N
lengthnumber6验证码长度N
focusbooleanfalse是否自动聚焦N
disabledbooleanfalse是否禁用N
maskbooleanfalse是否密码遮罩N
customStylestring""自定义样式N

CodeInput Events

名称参数描述
changevalue: string值变化时触发
completevalue: string-
inputvalue: string输入时触发
update:valuevalue: string-

CodeInput Slots

名称描述
--
Checkbox 多选框
用于从多个选项中选择一个或多个结果，支持样式切换、全选和卡片态。
ColorPicker 颜色选择器
用于颜色选择，支持基础色板、完整调色板、弹窗模式和多种色值格式。