微信小程序使用车牌号输入法
发布时间:2020-12-14 19:11:59 所属栏目:资源 来源:网络整理
导读:在做小程序时,做了一个关于车的项目,然后需要添加车辆信息、添加车牌号,使用车牌键盘输入,当时我把这个需求给砍了,然后在添加车辆信息时,老大看到数据库里我乱填的车牌号,又让我把他加上了^o^ 1.效果图 2.相关代码 使用组件形式实现键盘输入 组件代码
在做小程序时,做了一个关于车的项目,然后需要添加车辆信息、添加车牌号,使用车牌键盘输入,当时我把这个需求给砍了,然后在添加车辆信息时,老大看到数据库里我乱填的车牌号,又让我把他加上了^o^ 1.效果图2.相关代码
组件代码index.wxml <view class="carPlate" wx:if="{{show}}">
<block wx:if={{type==1}}">
<"wordList">
<"wordItem" wx:for={{cityKeyword1}}" wx:key={{item}}" bindtap="handleClick" data-type="1" data-item={{item}}">{{item}}</view>
</view>
<{{cityKeyword2}{{cityKeyword3}{{cityKeyword4}view>
</block>
<block wx:else>
<{{keyNumber}"2" data-item={{wordList1}{{wordList2}view>
<"wordItem wordClear" bindtap="handleClick" data-item="delete">
<image src="/images/input-clear.png" class="clearImg"></image>
</{{wordList3}"wordItem wordConfirm" bindtap="confirm">确定</block>
</view>
.carPlate{
position: fixed;
padding: 12rpx 30rpx;
left: 0;
bottom: width: 100%;
/* height: 150px; */
font-size: background: #fff;
box-sizing: border-box;
border-top: 1px solid rgb(211,207,207);
z-index: 200;
}
.wordList{
display: flex;
100%;
justify-content: space-between;
align-items: center;
}
.wordItem{
margin: 5rpx;
70rpx;
height: line-height: text-align: center;
border: 1px solid #eee;
border-radius: 10rpx;
}
.wordConfirm{
130rpx;
color: #473af0;
}
.wordClear{
100rpx;
}
.clearImg{
60rpx;
vertical-align: middle;
}
Component({
properties: {
type: {
type: Number,default: 1,},show: {
Boolean,51); font-weight: 700;">default: false,}
},data: {
cityKeyword1: '京沪浙苏粤鲁晋冀豫',cityKeyword2: '川渝辽吉黑皖鄂湘赣',cityKeyword3: '闽陕甘宁蒙津贵云',cityKeyword4: '桂琼青新藏港澳台',keyNumber: '1234567890',wordList1: 'QWERTYUIOP',wordList2: 'ASDFGHJKL',wordList3: 'ZXCVBNM',methods: {
handleClick(e) {
let value = e.currentTarget.dataset.item;
let type = e.currentTarget.dataset.type;
switch(value) {
case 'confirm':
this.triggerEvent('confirm');
break;
'delete':
'delete');
default:
'change',{ value,51); font-weight: 700;">type });
}
}
}
})
3.父组件引入
Page({
data: {
carNo: '',translateSpace: 0,inputType: // 车牌输入类型,1简称,2数字或者字母,
showPlateInput: /* 用于点击弹出键盘输入,space为键盘弹出后向上拉取的距离 */
handleClick(e) {
/* 150为键盘的高度 */
let space = -(e.currentTarget.offsetTop - 150);
/* regExp用于判断当前已输入的车牌号是否是中文,并让键盘显示中文还是英文输入 */
let regExp = /^[u4e00-u9fa5]+/;
let inputType = 1;
if(regExp.test(this.data.carNo)) {
inputType = 2;
}
this.setData({
translateSpace: space,showPlateInput: true,inputType
})
},136);">/* 键盘输入操作 */
handlePlateChange(e) {
let value = e.detail.value;
let type = e.detail.type;
let carNo = data.carNo;
carNo += value;
if(type == 1) {
this.setData({
inputType: 2
})
}
this.setData({
carNo
})
},136);">/* 点击键盘上的确定 */
handlePlateConfirm() {
/* isCarPlate用于判断输入的车牌号是否符合规范 */
if (!this.isCarPlate(data.carNo)) {
wx.showToast({
title: '请输入正确的车牌号',icon: 'none',duration: 2000
})
return false;
}
this.setData({
translateSpace: 1
})
},136);">/* 用于键盘输入删除 */
handlePlateDelete(e) {
let carNo = data.carNo;
carNo = carNo.substring(1);
if(carNo.length == 0) {
1
})
}
this.setData({
carNo,})
},136);">/* 判断车牌号 */
isCarPlate(value) {
return /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z04}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(value);
}
})
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^) |