更新记录

1.0.0（2025-04-28） 下载此版本

首次提交

平台兼容性

车牌号输入组件 (BestPlateKeyboard)

一个功能强大又完善的中国车牌号输入组件，支持各种车牌类型，包括普通蓝牌、新能源绿牌、黄牌挂车、黑牌港澳、使领馆车牌和警车车牌。

特性

• 支持多种车牌类型
  • 普通蓝牌车牌
  • 新能源绿牌车牌
  • 黄牌挂车车牌
  • 黑牌港澳车牌
  • 使领馆红白车牌
  • 警车车牌
• 高度还原真实车牌样式
• 自定义专用键盘，支持省份、字母、数字切换
• 自动识别车牌类型并应用对应样式
• 支持 iOS 底部安全区域
• 支持自定义占位符和最大长度
• 支持双向数据绑定

安装

直接复制组件到项目中使用，适用于 Vue 3 + uni-app 项目。

基本用法

<template>
  <view class="container">
    <best-plate-keyboard v-model="plateNumber" @complete="onComplete" />
  </view>
</template>

<script setup>
import { ref } from "vue"
import BestPlateKeyboard from "@/components/best-plate-keyboard/index.vue"

const plateNumber = ref("")

const onComplete = (value) => {
  console.log("车牌号输入完成:", value)
}
</script>

属性

事件

支持的车牌类型

1. 普通蓝牌：标准的蓝底白字私家车车牌
2. 新能源绿牌：新能源车专用绿牌，8位车牌
3. 黄牌挂车：带"挂"字的黄底黑字挂车车牌
4. 黑牌港澳：带"港"或"澳"字的黑底白字港澳车牌
5. 使领馆车牌：带"使"或"领"字的白底红黑字使领馆车牌
6. 警车车牌：带"警"字的白底黑字警车车牌

高级用法

自定义触发器

您可以通过插槽自定义触发键盘显示的元素：

<best-plate-keyboard v-model="plateNumber">
  <view class="custom-trigger">
    <text>{{ plateNumber || '点击输入车牌号' }}</text>
  </view>
</best-plate-keyboard>

在表单中使用

<template>
  <view class="form">
    <view class="form-item">
      <view class="label">车主姓名</view>
      <input v-model="form.name" placeholder="请输入车主姓名" />
    </view>

    <view class="form-item">
      <view class="label">车牌号码</view>
      <best-plate-keyboard v-model="form.plateNumber" placeholder="请输入车牌号码" />
    </view>

    <button @click="submitForm">提交</button>
  </view>
</template>

<script setup>
import { reactive } from "vue"
import BestPlateKeyboard from "@/components/best-plate-keyboard/index.vue"

const form = reactive({
  name: "",
  plateNumber: "",
})

const submitForm = () => {
  console.log("提交表单数据:", form)
}
</script>

注意事项

1. 该组件适用于 Vue3 的 uni-app 项目，vue2 版本请download下来自行改写