更新记录

1.0.0（2026-02-02） 下载此版本

新版本发布

平台兼容性

uni-app(3.7.0)

其他

车牌输入工具 功能说明文档

1. 组件简介

本项目实现了一个基于 Vue2 (Options API) 和 UniApp 的通用车牌号输入组件。专为中国国内车牌输入场景设计，完美兼容燃油车（7位）和新能源车（8位）录入，并适配了微信小程序、H5、Android 及 iOS 原生环境。

2. 核心功能特性

交互逻辑

• 智能键盘切换：

• 第 1 位：自动弹出 省份简称 键盘（京、津、沪等）。

• 第 2-8 位：自动切换为 数字 + 字母 键盘。

• 新能源适配：

• 提供 8个 输入格。

• 第 8 位默认为选填，未输入时显示“+新能源”特殊样式，输入后自动转换为常规字符样式。

• 自动步进与回退：

• 输入字符后，光标自动跳至下一格。

• 点击删除键，若当前格为空则自动退格并删除前一位内容。

• 防误触设计：提供键盘遮罩层（Mask），点击键盘外部区域自动收起键盘。

UI/UX 体验

• 视觉风格：主色调 #EF3912，符合主流政务/出行类应用审美。
• 暗黑模式 (Dark Mode)：内置 CSS 变量/类名适配，支持系统级深色模式切换。
• 宽屏适配：针对 iPad/PC 端做了最大宽度限制（Max-width: 600px），防止输入框过度拉伸。
• 安全区域适配：底部增加 safe-area-inset-bottom 支撑，完美适配 iPhone X+ 系列全面屏机型。

3. 技术规格

4. 文件结构与使用

4.1 引入方式

该组件设计为单文件组件（SFC），所有逻辑均包含在 .vue 文件中。

// 在 page.json 或其他 Vue 文件中引入
import LicensePlateInput from '@/components/LicensePlateInput.vue';

export default {
  components: {
    LicensePlateInput
  }
}

4.2 数据模型

组件内部维护一个长度为 8 的数组用于存储车牌每一位的值：

data() {
  return {
    // 初始化8个空字符串
    plateData: ['', '', '', '', '', '', '', ''] 
  }
}

5. 核心逻辑详解

5.1 键盘类型判断

通过计算属性 keyboardType 实时监听当前焦点的索引 currentIndex：

computed: {
  keyboardType() {
    // 索引为0显示省份键盘，否则显示数字字母键盘
    return this.currentIndex === 0 ? 'PROVINCE' : 'ALPHANUM';
  }
}

5.2 输入处理 (handleKeyPress)

使用 this.$set 确保 Vue2 数组更新的响应式：

1. 赋值：this.$set(this.plateData, this.currentIndex, value)
2. 跳转：若 currentIndex < 7，则 currentIndex++。

5.3 删除处理 (handleDelete)

模拟原生键盘的删除逻辑：

• 若当前格有值 -> 清空当前格，焦点不动。
• 若当前格无值 -> 焦点前移 -> 清空上一格。

6. 样式定制 (CSS)

主要颜色变量定义在 <style> 顶部，方便后期换肤：

$primary-color: #EF3912; // 主题色
$text-color: #333333;    // 主要文字
$bg-color: #F5F7FA;      // 背景色

针对 iPhone 底部小黑条的适配代码：

.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

7. 注意事项

1. 字体图标：为了保持代码纯净，删除键和新能源图标使用了文本字符（×, +）。如需更高精度的视觉效果，建议替换为 Base64 图片或 SVG 图标。
2. 特殊后缀：键盘默认包含了“警”字，如需支持“港、澳、学、领”，请在 data.letters3 或特殊键区域取消注释并配置。
3. 提交校验：目前的校验逻辑为 length < 7 拦截，根据实际业务需求，可能需要增加正则表达式校验（例如验证省份简称是否合法等）。