更新记录

1.0.1（2026-08-29） 下载此版本

‑ docs：更新README说明文档，补充参数说明

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

[1.0.0] - 2026‑08‑29

• ✨ 首次发布 zxy‑pin-input 验证码 PIN 格子输入组件
• ✨ 支持自定义输入长度、格子宽高、间距、边框粗细、圆角、主题色
• ✨ 密码脱敏模式，输入内容显示圆点●
• ✨ 自带闪烁光标，支持填满后光标定位至末尾格子
• ✨ 紧凑零间距模式，悬浮分割线（无占位布局）
• ✨ 单格子边框高亮聚焦效果
• ✨ 内置超长值兜底截断防护，解决光标索引越界卡死问题
• ✨ 完整回调事件：input、change、complete、focus、blur、confirm
• ✨ 对外实例方法：getValue()、clear()、focusInput()
• ✅ 兼容 Vue2 / Vue3，适配 H5、App‑Vue、微信 / 支付宝等主流小程序

平台兼容性

uni-app(3.8.2)

其他

zxy-pin-input

验证码PIN格子输入框，支持自定义尺寸、边框、间距、密码圆点模式、光标闪烁、紧凑分割线，兼容 Vue2 / Vue3，支持 H5、App、主流小程序。

✨ 特性

• 自定义输入长度（常用4/6位验证码）
• 可切换密码圆点脱敏模式
• 自定义格子大小、字体大小、边框粗细、圆角、间距
• 自定义文字颜色、边框色、聚焦色、光标颜色、分割线颜色
• 内置闪烁光标，填满后光标自动定位到末尾
• 紧凑无边框模式，支持格子间垂直分割线
• 支持禁用、自动失焦、获取焦点、清空、获取值方法
• 完整事件回调：input / change / complete / focus / blur / confirm

📦 安装

uni-app 插件市场导入，或者放到项目 uni_modules/zxy-pin-input

easycom 自动引入，无需 import，直接使用标签 <zxy-pin-input />

🚀 基础使用

<template>
    <view>
        <!-- 基础6位验证码 -->
        <zxy-pin-input :value="code" @complete="handleComplete" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            code: ''
        }
    },
    methods: {
        // 输入完成回调
        handleComplete(value) {
            console.log('输入完成：', value)
        }
    }
}
</script>

🧩 完整示例（常用配置）

需要自定义样式时参考，不需要的属性可直接删除

<template>
    <view>
        <!-- 基础6位验证码 -->
        <zxy-pin-input length="6" slotSize="70" gutter="10" border="2" :assword="false" :disabled="false" :autoBlur="true" borderColor="#bfbfbf" focusColor="#007aff" textColor="#333" bgColor="#fff" cursorColor="#007aff" dividerColor="#ddd" borderRadius="8" fontSize="36" :focus="false" v-model="code" @input="onInput" @change="onChange" @complete="onComplete" @focus="onFocus" @blur="onBlur" @confirm="onConfirm"
        />
    </view>
</template>

<script>
export default {
    data() {
        return {
            code: ''
        }
    },
    methods: {
        // 输入完成回调
        handleComplete(value) {
            console.log('输入完成：', value)
        }
    }
}
</script>

📋 Props 参数说明

📢 事件 Events

🛠 组件实例方法（通过 ref 调用）

<zxy-pin-input ref="pinRef" />

💡 使用提示

1. 紧凑分割线模式：设置 border="0" 且 gutter="0"，自动启用格子中间垂直分割线
2. 输入类型内置 number，优先唤起数字键盘

📌 兼容平台

• ✅ H5
• ✅ App（Vue）
• ✅ 微信小程序、支付宝小程序、头条小程序、QQ 小程序
• ❌ nvue、uni-app-x 暂不支持