小程序开发过程中可能会碰到和车牌信息相关的开发，这时候就需要输入车牌号，传统的键盘输入车牌号，需要打出汉字，再选择相应的字母数字，并不是特别方便，这里笔者专门开发了车牌号键盘，可以任意选择修改省份，数字和字母。
先看示例图：
组件主要代码如下：
// components/plate-number-keyboard/plate-number-keyboard.js
Component({
behaviors: [],
properties: {
show: { // 控制键盘显示隐藏
type: Boolean,
value: false
initValue: { // 初始化的值
type: String,
value: ""
data: {
plateNumber: "", // 键盘操作结果值
provinceList: {
line1: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏'],
line2: ['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼'],
line3: ['川', '贵', '云', '陕', '甘', '青', '蒙', '贵', '宁', '新'],
line4: ['藏', '使', '领', '警', '学', '港', '澳']
letterNumberList: {
line1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
line2: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
line3: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
line4: ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
showProvince: true, // 是否显示省份面板，控制省份面板和字符面板显示
}, // 私有数据，可用于模板渲染
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function() {},
moved: function() {},
detached: function() {},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function() {}, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() {
// 如果初始化有值，赋值，否则，置为空
this.setData({
plateNumber: this.data.initValue ? this.data.initValue : ''
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function() {},
hide: function() {},
resize: function() {},
methods: {
* 键盘面板切换操作，控制省份内容和字符内容显示
_clickChangePlane: function() {
this.setData({
showProvince: !this.data.showProvince
* 关闭键盘，将键盘隐藏
_closeKeyboard: function(e) {
console.log(2)
this.setData({
show: false
/* 触发外部绑定事件，传递结果值 */
_handleResult: function() {
const myEventDetail = {
value: this.data.plateNumber // 传递到结果文本
// 触发外部绑定事件，传递结果参数
this.triggerEvent('getResult', myEventDetail);
* 键盘主要键点击事件，将点击内容更新到plateNumber
_handleClick: function(e) {
// 如果当前显示的省份面板，当即任意省份后，自动切换到字符面板，同时将结果值的第一个字符修改
if (this.data.showProvince) {
this.setData({
showProvince: false
let currentResult = this.data.plateNumber; // 当前的结果值
let currentText = e.currentTarget.dataset.text; // 当前的操作值
// 车牌号最多8位，大多数7位，新能源8位，控制不能超过8位数
if (currentResult.length < 8) {
this.setData({
plateNumber: currentResult + currentText
this._handleResult();
* 删除回退点击事件
_handleDelete: function() {
let currentText = this.data.plateNumber;
currentText = currentText.substring(0, currentText.length - 1);
// 当当前结果值长度大于0时，可执行删减操作
if (currentText.length >= 0) {
this.setData({
plateNumber: currentText
this._handleResult();
* 防止点击穿透
_preventDefault: function(e) {}
具体的说明文档，以及详细代码见下文链接：
小程序组件：车牌号键盘
觉得还可以的给个star，有问题可以留言。
欢迎关注博主——小圣贤君，有问题可以留言哦~
yarn add vehicle - plate - keyboard
:hammer: 用法
import LicenseKeyboard from 'vehicle-plate-keyboard' ;
import 'vehicle-plate-keyboard/dist/main.css' ;
< LicenseKeyboard xss=removed xss=removed xss=removed> setState ( { value } ) }
value = { state . value }
done = {
公司要做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，决定自己写一个键盘。
效果图如下
省份简写键盘如下:
(此图片来源于网络，如有侵权，请联系删除! )
省份简写键盘
英文简写键盘如下:
(此图片来源于网络，如有侵权，请联系删除! )
英文简写键盘
(此图片来源于网络，如有侵权，请联系删除! )
wxml文件内容
<view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-colo
<view class="page_box" catchtap="hindKeyboard">
<view class="input_view" catchtap="hindKeyboard">
<text class="title">消费金额：</text>
<view class="input_box" catchtap="showKeyboard">
<text class="i
PlateNumberKeyBoard
Android 自定义车牌键盘
最近在做物流的项目，需要输入车牌号，传统的输入体验并不好，来回切换还要手打，便有了自定义键盘的想法。
其实这个车牌需求并不多见，物流、租车、停车相关的会常见一些，好在有前辈已经铺好路了
这个比较详细：
1.在res文件夹下新建xml文件夹，新建两个文件：number_or_letters.xml（数字和大写字母）、province_abbreviation.xml（省会、直辖市、特别行政区简称）。
number_or_letters.xml
<?xml version="1.0" encoding="UTF-8"?>
<Keyboard android:keyWidth="10%p" android:keyHeight="8%"
android:horizontalGap="0.0px" andro
"usingComponents": {
"van-overlay": "@vant/weapp/overlay/index",
"van-divider": "@vant/weapp/divider/index"
