微信小程序 车牌 键盘 如图：
源码：keyboard.js
Component({
externalClasses: ['v-panel'],
properties: {
isShow: {
type: Boolean,
value: false,
},
buttonBorder: {
type: String,
value: "1px solid #ccc"
},
backgroundColor:{
type: String,
value: "#fff"
},
//1为省份键盘，其它为英文键盘
keyBoardType: {
type: Number,
value: 1,
}
},
data: {
keyVehicle1: '陕京津沪冀豫云辽',
keyVehicle2: '黑湘皖鲁新苏浙赣',
keyVehicle3: '鄂桂甘晋蒙吉闽贵',
keyVehicle4: '粤川青藏琼宁渝',
keyNumber: '1234567890',
keyEnInput1: 'QWERTYUIOP',
keyEnInput2: 'ASDFGHJKL',
keyEnInput3: 'ZXCVBNM中',
},
methods: {
vehicleTap: function (event) {
let val = event.target.dataset.value;
switch (val){
case 'delete':
this.triggerEvent('delete');
this.triggerEvent('inputchange');
break;
case 'ok':
this.triggerEvent('ok');
break;
default:
this.triggerEvent('inputchange', val);
}
},
}
});
keyboard.json
{
"component": true
}
keyboard.wxml
<view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{{backgroundColor}}">
<!--省份简写键盘-->
<block wx:if="{{keyBoardType === 1}}">
<view class="vehicle-panel-row">
<view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle1}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
</view>
<view class="vehicle-panel-row">
<view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle2}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
</view>
<view class="vehicle-panel-row">
<view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle3}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
</view>
<view class="vehicle-panel-row-last">
<view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' data-value="{{item}}" wx:for="{{keyVehicle4}}" style="border:{{buttonBorder}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
</view>
</block>
<!--英文键盘 -->
<block wx:else>
<view class="vehicle-panel-row">
<view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-number' bindtap='vehicleTap' data-value="{{item}}" wx:for="{{keyNumber}}" style="border:{{buttonBorder}}" wx:for-index="idx" wx:key="item">{{item}}</view>
</view>
<view class="vehicle-panel-row">
<view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyEnInput1}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
</view>
<view class="vehicle-panel-row">
<view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyEnInput2}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
<view hover-class="vehicle-hover" style="border:{{buttonBorder}}" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-img'>
<image src='delete.svg' class='vehicle-en-button-delete' bindtap='vehicleTap' data-value="delete" mode='aspectFit'>删除</image>
</view>
</view>
<view class="vehicle-panel-row-last">
<view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' style="border:{{buttonBorder}}" data-value="{{item}}" wx:for="{{keyEnInput3}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
<view hover-class="vehicle-hover" style="border:{{buttonBorder}}" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-ok' bindtap='vehicleTap' data-value="ok">确定</view>
</view>
</block>
</view>
keyboard.wxss
:host {
width: 100%;
}
.vehicle-panel {
width: 100%;
position: fixed;
bottom: 0;
display:flex;
flex-direction:column;
justify-content:center;
z-index: 1000;
}
.vehicle-panel-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.vehicle-panel-row-last{
display: flex;
justify-content: space-between;
align-items: center;
}
.vehicle-panel-row-button {
background-color: #fff;
margin: 5rpx;
padding: 5rpx;
width: 80rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border-radius: 10rpx;
}
.vehicle-panel-row-button-number {
background-color: #eee;
}
.vehicle-panel-row-button-last {
width: 90rpx;
height: 90rpx;
line-height: 90rpx;
}
.vehicle-hover {
background-color: #ccc;
}
.vehicle-panel-row-button-img {
display: flex;
justify-content: center;
align-items: center;
}
.vehicle-en-button-delete {
width: 55rpx;
height: 85rpx;
}
.vehicle-panel-ok {
background-color: #0F4BA1;
color: #fff;
width: 150rpx;
height: 80rpx;
}
页面中使用：
carnum.json
"usingComponents": {
"v-panel": "../../../components/keyboard/keyboard"
}
carnum.wxml
<v-panel is-show="{{isShow}}" bindok="inputOk" binddelete="delete" bindinputchange="click" bindok="ok" key-board-type="{{keyBoardType}}" backgroundColor="white" />
carnum.js
//开启 地域选择键盘
open: function () { this.setData({ isShow: true, keyBoardType: 1 }); },
//开启 车牌选择键盘
openInput: function () { this.setData({ isShow: true, keyBoardType: 2 });},
//关闭键盘
close: function () { this.setData({ isShow: false });},
//点击了删除
delete: function (e) {
var that = this
this.setData({ plateNo: that.data.plateNo.substring(0, that.data.plateNo.length - 1) });
this.setData({ plateNo2: that.data.plateNo2.substring(0, that.data.plateNo2.length - 1) });
this.setData({
plateNo:that.data.plateNo,
Value:that.data.plateNo
})
this.setData({
plateNo2:that.data.plateNo2,
Values:that.data.plateNo2
})
},
//点击键盘
click: function (e) {
if(this.data.w == "w") {
var val = e.detail;
console.log(val)
if (!val) return;
//汉字 正则表达式
var reg = new RegExp('[u4E00-u9FFF]+', 'g');
if(val == "中") {
this.setData({
keyBoardType:1,
})
return
}
if (!reg.test(val)) {
this.setData({ territory: val,plateNo:val,
keyBoardType:2,
});
} else {
if (this.data.plateNo.length == 7) return;
this.setData({ plateNo: this.data.plateNo + val });
}
this.setData({ Value: this.data.plateNo});
} else if(this.data.w == "y") {
console.log("新能源")
var val = e.detail;
console.log(val)
if (!val) return;
//汉字 正则表达式
var reg = new RegExp('[u4E00-u9FFF]+', 'g');
if(val == "中") {
this.setData({
keyBoardType:1,
})
return
}
if (!reg.test(val)) {
this.setData({ territory: val,plateNo2:val,
keyBoardType:2,
});
} else {
if (this.data.plateNo2.length == 8) return;
this.setData({ plateNo2: this.data.plateNo2 + val });
}
this.setData({ Values: this.data.plateNo2});
}
},
//点击了 小键盘确认
ok: function (e) { this.setData({ isShow: false }); },
data的w和y是点击切换新能源的 代码太多了就不贴了
