深入解析：分享一个完整的uniapp车牌号输入组件

2025-09-23 15:32 tlnshuju 阅读(0) 评论(0) 收藏举报

UniApp车牌号输入组件封装摘要：该组件提供标准化的车牌号输入功能，支持普通车牌和新能源车牌两种类型切换。主要特性包括：智能键盘：自动切换省份、字母和数字键盘新能源车牌支持：自动适配9位车牌格式交互体验：点击车牌位自动弹出对应键盘双向绑定：支持v-model绑定车牌值可配置性：可设置初始车牌类型和是否显示类型选择器组件采用Vue单文件组件形式开发，包含完整的模板、脚本和样式，可直接在UniApp项目中引用。通过watch监听value变化实现双向绑定，提供plate-type-change事
车牌号输入功能标准的uniapp组件形式，方便在项目中调用：

普通车牌
新能源车牌
{{ item || '' }}
{{ getKeyboardTitle() }}
{{ key }}
删除
ABC
123
export default {
name: 'LicensePlateInput',
props: {
// 初始车牌类型
initPlateType: {
type: String,
default: 'normal' // normal 或 newEnergy
},
// 是否显示车牌类型选择器
showTypeSelector: {
type: Boolean,
default: true
},
// 初始车牌号码
value: {
type: String,
default: ''
}
},
data() {
return {
plateType: this.initPlateType,
plateArray: new Array(8).fill(''),
newEnergyPlateArray: new Array(9).fill(''),
activeIndex: 0,
showKeyboard: false,
keyboardType: 'province' // province, alphabet, number
}
},
computed: {
provinceKeys() {
return [
'京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏',
'浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂',
'琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁',
'新', '港', '澳', '台', '使', '领', '警', '学', '试'
]
},
alphabetKeys() {
return [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K',
'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
'W', 'X', 'Y', 'Z'
]
},
numberKeys() {
return [
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
]
},
newEnergyKeys() {
return [
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'A', 'B', 'C', 'D', 'E', 'F'
]
},
currentKeys() {
// 新能源车牌特殊处理
if (this.plateType === 'newEnergy') {
// 新能源车牌最后一位只能是数字或特定字母
if (this.activeIndex === 8) {
return this.newEnergyKeys;
}
}
switch(this.keyboardType) {
case 'province':
return this.provinceKeys;
case 'alphabet':
return this.alphabetKeys;
case 'number':
return this.numberKeys;
default:
return this.provinceKeys;
}
},
displayPlateArray() {
return this.plateType === 'newEnergy' ? this.newEnergyPlateArray : this.plateArray;
}
},
watch: {
value: {
handler(newVal) {
if (newVal) {
this.setPlateNumber(newVal);
}
},
immediate: true
}
},
methods: {
switchPlateType(type) {
this.plateType = type;
this.activeIndex = 0;
this.showKeyboard = false;
this.$emit('plate-type-change', type);
},
focusInput(index) {
this.activeIndex = index;
this.showKeyboard = true;
// 根据车牌类型和位置确定键盘类型
if (this.plateType === 'normal') {
if (index === 0) {
this.keyboardType = 'province';
} else if (index === 1) {
this.keyboardType = 'alphabet';
} else {
this.keyboardType = 'number';
}
} else {
// 新能源车牌
if (index === 0) {
this.keyboardType = 'province';
} else if (index === 1) {
this.keyboardType = 'alphabet';
} else if (index >= 2 && index = 2 && this.activeIndex  0) {
// 清空当前位
if (this.plateType === 'newEnergy') {
this.$set(this.newEnergyPlateArray, this.activeIndex, '');
} else {
this.$set(this.plateArray, this.activeIndex, '');
}
// 如果当前位已空，则跳转到上一位
if (this.getCurrentPlateArray()[this.activeIndex] === '') {
this.activeIndex--;
}
} else {
// 第一位时直接清空
if (this.plateType === 'newEnergy') {
this.$set(this.newEnergyPlateArray, this.activeIndex, '');
} else {
this.$set(this.plateArray, this.activeIndex, '');
}
}
// 触发输入事件
this.$emit('input', this.getPlateNumber());
},
switchKeyboard(type) {
this.keyboardType = type;
},
getKeyboardTitle() {
if (this.plateType === 'newEnergy' && this.activeIndex === 8) {
return '选择数字或字母(A-F)';
}
switch(this.keyboardType) {
case 'province':
return '选择省份';
case 'alphabet':
return '选择字母';
case 'number':
return '选择数字';
default:
return '选择字符';
}
},
getCurrentPlateArray() {
return this.plateType === 'newEnergy' ? this.newEnergyPlateArray : this.plateArray;
},
getPlateNumber() {
const plateArray = this.plateType === 'newEnergy' ? this.newEnergyPlateArray : this.plateArray;
return plateArray.join('');
},
// 设置车牌号码
setPlateNumber(plateNumber) {
if (!plateNumber) return;
const len = plateNumber.length;
if (len === 8) {
this.plateType = 'normal';
for (let i = 0; i
.license-plate-input {
padding: 20rpx;
}
.plate-type-selector {
display: flex;
justify-content: center;
margin-bottom: 30rpx;
}
.type-item {
padding: 15rpx 30rpx;
border: 2rpx solid #ddd;
border-radius: 50rpx;
margin: 0 20rpx;
font-size: 28rpx;
&.active {
background-color: #2979ff;
color: #fff;
border-color: #2979ff;
}
}
.plate-display {
display: flex;
justify-content: center;
margin-bottom: 40rpx;
&.normal .plate-item {
width: 60rpx;
}
&.newEnergy .plate-item {
width: 55rpx;
}
}
.plate-item {
height: 100rpx;
border: 2rpx solid #ddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
font-weight: bold;
margin: 0 5rpx;
border-radius: 8rpx;
&.plate-item-active {
border-color: #2979ff;
box-shadow: 0 0 10rpx rgba(41, 121, 255, 0.3);
}
}
.keyboard-container {
background-color: #f5f5f5;
padding: 20rpx;
}
.keyboard-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 2rpx solid #eee;
}
.keyboard-title {
font-size: 32rpx;
font-weight: bold;
}
.keyboard-keys {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 20rpx 0;
max-height: 500rpx;
overflow-y: auto;
}
.key-item {
width: calc(10% - 10rpx);
height: 70rpx;
background-color: #fff;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 10rpx 5rpx;
font-size: 32rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
&.key-delete {
background-color: #ff5a5f;
color: #fff;
width: 15%;
}
}
.keyboard-toggle {
display: flex;
justify-content: center;
padding: 20rpx 0;
}
.toggle-btn {
padding: 10rpx 30rpx;
background-color: #e0e0e0;
border-radius: 30rpx;
margin: 0 20rpx;
font-size: 28rpx;
&.active {
background-color: #2979ff;
color: #fff;
}
}

使用示例：

车牌号输入示例
基础用法
输入的车牌号: {{ plateNumber }}
新能源车牌
输入的车牌号: {{ newEnergyPlate }}
隐藏类型选择器
输入的车牌号: {{ fixedPlate }}
清空所有
设置车牌号
import LicensePlateInput from '@/components/LicensePlateInput.vue'
export default {
components: {
LicensePlateInput
},
data() {
return {
plateNumber: '',
newEnergyPlate: '',
fixedPlate: ''
}
},
methods: {
onPlateTypeChange(type) {
console.log('车牌类型切换为:', type)
},
clearAll() {
this.plateNumber = ''
this.newEnergyPlate = ''
this.fixedPlate = ''
},
setPlate() {
this.plateNumber = '京A12345'
this.newEnergyPlate = '京AD123456'
}
}
}
.container {
padding: 20rpx;
}
.title {
text-align: center;
font-size: 36rpx;
font-weight: bold;
margin-bottom: 40rpx;
}
.section {
margin-bottom: 40rpx;
padding: 20rpx;
background-color: #f8f8f8;
border-radius: 10rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.result {
margin-top: 20rpx;
padding: 20rpx;
background-color: #fff;
border-radius: 10rpx;
}
.actions {
display: flex;
justify-content: space-around;
margin-top: 40rpx;
}