更新记录

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

车牌号输入组件，支持 12 种中国车牌类型，兼容 H5、微信小程序、App。

平台兼容性

nny-car-plate-input 使用说明

uni-app Vue 3 车牌号输入组件，点击输入条弹出底部键盘，支持 12 种中国车牌类型，兼容 H5、微信小程序、App。

组件目录

components/nny-car-plate-input/
├── nny-car-plate-input.vue   # 主组件
└── plate-config.js           # 车牌类型配置与工具函数

安装方式

将 components/nny-car-plate-input 整个文件夹复制到目标项目的 components/ 目录下即可。

uni-app 默认开启 easycom，组件名与文件夹名一致，无需手动注册，可直接在页面中使用。

快速开始

<template>
  <nny-car-plate-input v-model="plateNumber" />
</template>

<script setup>
import { ref } from 'vue'

const plateNumber = ref('')
</script>

Props

限制车牌类型示例

只显示普通车和新能源小型车：

<nny-car-plate-input
  v-model="plateNumber"
  :type-keys="['normal', 'new_energy_small']"
/>

Events

监听变化示例

<nny-car-plate-input
  v-model="plateNumber"
  @change="onChange"
  @complete="onComplete"
/>

<script setup>
const onChange = ({ value, type, complete }) => {
  console.log(value, type, complete)
}

const onComplete = (value) => {
  uni.showToast({ title: `录入完成：${value}`, icon: 'none' })
}
</script>

实例方法

通过 ref 可调用组件暴露的方法：

<nny-car-plate-input ref="plateRef" v-model="plateNumber" />

const plateRef = ref(null)

plateRef.value?.open()
plateRef.value?.setValue('京A12345', 'normal')

const result = plateRef.value?.validate()
if (!result.valid) {
  uni.showToast({ title: result.message, icon: 'none' })
}

车牌类型

工具函数

如需在业务代码中单独使用校验、解析等逻辑，可从 plate-config.js 导入：

import {
  PLATE_TYPES,
  validatePlate,
  parsePlateValue,
  guessPlateType,
  filterPlateTypes
} from '@/components/nny-car-plate-input/plate-config.js'

// 校验
const result = validatePlate('京A12345', 'normal')
// { valid: true, message: 'ok', type: 'normal', value: '京A12345' }

// 解析车牌字符串
const { plateType, values } = parsePlateValue('京AD12345')

跨端说明

常见问题

Q：小程序点击输入条没有反应？

确认微信基础库版本 ≥ 2.25.0（root-portal 依赖）。可在微信开发者工具中调高基础库版本后重试。

Q：如何隐藏类型切换栏？

<nny-car-plate-input v-model="plateNumber" :show-type-bar="false" />

Q：如何设置初始车牌？

直接绑定 v-model 即可，组件会自动识别类型并回填：

<nny-car-plate-input v-model="plateNumber" />

<script setup>
const plateNumber = ref('京A12345')
</script>

Q：填写完成后不想自动关弹层？

<nny-car-plate-input v-model="plateNumber" :auto-close="false" />

演示页面

本项目 pages/index/index.vue 提供了基础用法示例，可直接运行项目查看效果。