更新记录

1.0.0（2026-07-30）

• 首次发布
• 支持普通 7 位车牌输入
• 支持新能源 8 位车牌输入
• 支持通过 showSpecialPlate 开启特殊号牌
• 支持使、领、警、学、港、澳特殊号牌输入规则
• 支持 ref.show(value) 打开和回显已有车牌
• 仅在点击保存后触发 confirm

平台兼容性

uni-app(5.22)

uni-app x(5.22)

yunluo-car-plate 车牌号输入键盘

一个适用于 uni-app 的车牌号弹窗输入组件。

组件通过 ref.show() 打开，输入过程中的数据保留在组件内部，只有用户点击“保存”后才会触发 confirm 事件向外部回传完整车牌号码。

功能

• 普通车牌，7 位
• 新能源车牌，8 位
• 第一位使用省份简称键盘
• 第二位显示数字和字母键盘，但禁用数字
• 后续位置允许输入数字和字母
• 键盘不提供容易混淆的字母 I、O
• 支持删除、切换输入位置和编辑已有车牌
• 可通过属性开启使、领、警、学、港、澳特殊号牌
• 不依赖第三方 UI 组件
• 支持 Vue 2、Vue 3 Options API 项目

安装

将插件目录放入项目：

uni_modules/yunluo-car-plate

符合 uni_modules easycom 规范的项目无需手动 import，可以直接使用 <yunluo-car-plate>。

基础使用

<template>
  <view>
    <view @click="openPlateInput">
      {{ plateNumber || "请选择车牌号码" }}
    </view>

    <yunluo-car-plate
      ref="carPlate"
      @confirm="onPlateConfirm"
      @close="onPlateClose"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      plateNumber: "",
    };
  },
  methods: {
    openPlateInput() {
      this.$refs.carPlate.show(this.plateNumber);
    },
    onPlateConfirm(value) {
      this.plateNumber = value;
    },
    onPlateClose() {
      // 用户关闭弹窗，不会产生 confirm 回传
    },
  },
};
</script>

开启特殊号牌

特殊号牌默认关闭，需要显式传入：

<yunluo-car-plate
  ref="carPlate"
  :show-special-plate="true"
  @confirm="onPlateConfirm"
/>

开启后组件顶部会显示“特殊号牌”模式，支持：

特殊号牌的固定字符会自动填入并锁定。未选择具体特殊类型前，组件不会显示输入键盘。

特殊号牌是否可用于具体业务，应以当地车辆登记规则和业务接口支持范围为准。建议服务端再次校验车牌类型和格式。

Props

模板中使用 kebab-case 写法：

:show-special-plate="true"

Methods

通过组件 ref 调用。

示例：

this.$refs.carPlate.show();
this.$refs.carPlate.show("粤A12345");
this.$refs.carPlate.close();

Events

输入规则

普通车牌

• 总长度为 7 位
• 第一位只能选择省份简称
• 第二位只能选择字母
• 第三位至第七位可选择数字或字母

新能源车牌

• 总长度为 8 位
• 第一位只能选择省份简称
• 第二位只能选择字母
• 第三位至第八位可选择数字或字母

特殊号牌

• 与普通、新能源模式互斥
• 选择类型后自动配置可编辑位置
• 固定前缀、后缀不可修改
• 切换特殊类型时清空上一类型输入

注意事项

1. 组件只负责前端输入约束，提交前仍建议由后端进行最终校验。
2. 组件使用 position: fixed，默认层级为 9999。
3. 输入过程中不会触发 confirm，关闭弹窗也不会修改父组件数据。
4. 如果传入特殊号牌，但 showSpecialPlate 为 false，组件不会加载该特殊号牌。
5. App nvue、快应用及标记为 u 的平台尚未完整验证，上传插件市场前建议按目标平台实机测试。

目录结构

yunluo-car-plate
├─ components
│  └─ yunluo-car-plate
│     └─ yunluo-car-plate.vue
├─ changelog.md
├─ package.json
└─ README.md

技术支持与问题反馈

使用过程中如遇到问题。

• 🐧技术交流群：729308309
• 💚技术支持：zdw28288（备注 yunluo-car-plate）
• 💚宫主号：软件程序助手（提供组件更新说明与使用教程）

以上渠道用于本插件的集成咨询、问题反馈和版本更新通知。