微信公众号开发
小程序车牌号输入法实例
本文主要是介绍小程序车牌号输入法实例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
效果图：如下
子组件
组件：wxml
<view wx:if="{{isShow}}" class="vehicle-panel" style="background-color:#DCE2E6">
<!--省份简写键盘-->
<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' wx:for="{{keyVehicle1}}" bindtap='vehicleTap' data-type="1"
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' wx:for="{{keyVehicle2}}" bindtap='vehicleTap' data-type="1"
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' wx:for="{{keyVehicle3}}" bindtap='vehicleTap' data-type="1"
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-type="1"
data-value="{{item}}" wx:for="{{keyVehicle4}}" 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-type="2"
data-value="{{item}}" wx:for="{{keyNumber}}" 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" data-type="2"
class='vehicle-panel-row-button small' 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" data-type="2"
class='vehicle-panel-row-button small' wx:for="{{keyEnInput2}}" bindtap='vehicleTap'
data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
<view hover-class="vehicle-hover" hover-start-time="10" bindtap='vehicleTap' data-value="delete"
hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-img smalls'>
<image src='{{OSS}}20210929/4ae39cf45fb6f551.png' class='vehicle-en-button-delete' mode='aspectFit' />
</view>
</view>
<view class="vehicle-panel-row-last">
<view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" data-type="2"
class='vehicle-panel-row-button vehicle-panel-row-button-last small' bindtap='vehicleTap'
data-value="{{item}}" wx:for="{{keyEnInput3}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
<view hover-class="vehicle-hover" 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>
组件：wxss
:host {
width: 100%;
}
.vehicle-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1000;
padding: 4rpx 14rpx 62rpx 13rpx;
}
.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: #FFFFFF;
box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.15);
border-radius: 9rpx;
margin: 14rpx 0 0 0;
width: 78rpx;
height: 91rpx;
text-align: center;
line-height: 91rpx;
color: #2F3336;
font-size: 31rpx;
font-family: PingFangSC-, PingFang SC;
font-weight: 400;
}
.vehicle-panel-row-button-number,
.small {
width: 67rpx !important;
font-weight: normal;
}
.smalls{
width: 67rpx !important;
background: #C2C8CC;
}
.vehicle-panel-row-button-last {
width: 78rpx;
height: 91rpx;
line-height: 91rpx;
}
.vehicle-hover {
background-color: #ccc;
}
.vehicle-panel-row-button-img {
display: flex;
justify-content: center;
align-items: center;
}
.vehicle-en-button-delete {
width: 40rpx;
height: 29rpx;
}
.vehicle-panel-ok {
background: #C2C8CC;
box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.15);
border-radius: 9rpx;
color: #2F3336;
width: 212rpx;
height: 91rpx;
line-height: 91rpx;
font-size: 27rpx;
font-family: PingFangSC-, PingFang SC;
font-weight: normal;
}
组件：json
{
"component": true,
"usingComponents": {}
}
组件：js
Component({
externalClasses: ['v-panel'],
properties: {
isShow: {
type: Boolean,
value: false,
},
//1为省份键盘，其它为英文键盘
keyBoardType: {
type: Number,
value: 1,
}
},
data: {
OSS: `${wx.$PUBLIC.statics}`,
keyVehicle1: '京津沪冀豫云辽黑',
keyVehicle2: '湘皖鲁新苏浙赣鄂',
keyVehicle3: '桂甘晋新陕吉闽贵',
keyVehicle4: '粤川青藏琼宁渝临',
keyNumber: '1234567890',
keyEnInput1: 'QWERTYUIOP',
keyEnInput2: 'ASDFGHJKL',
keyEnInput3: 'ZXCVBNM',
},
methods: {
vehicleTap: function (event) {
let val = event.currentTarget.dataset.value;
let type = event.currentTarget.dataset.type;
switch (val) {
case 'delete':
this.triggerEvent('delete');
break;
case 'ok':
this.triggerEvent('ok');
break;
default:
this.triggerEvent('inputchange', {val,type});
}
},`在这里插入代码片`
}
});
父组件
wxml
<view class="box" bindtap="onClick">
<view>{{carNo[0]}}</view>
<view>{{carNo[1]}}</view>
<view>{{carNo[2]}}</view>
<view>{{carNo[3]}}</view>
<view>{{carNo[4]}}</view>
<view>{{carNo[5]}}</view>
<view>{{carNo[6]}}</view>
<block wx:if="{{carNo.length > 7}}">
<view>{{carNo[7]}}</view>
</block>
</view>
<view class="new" wx:if="{{carNo.length <= 7}}">
<image src="{{OSS}}20210929/ccd9007e50408184.png" />
</view>
<!-- 键盘 -->
<v-panel is-show="{{isShow}}" bindok="inputOk" binddelete="inputdelete" bindinputchange="inputChange" keyBoardType="{{keyBoardType}}" />
js
data: {
isShow: false,
keyBoardType: 1,
carNo: ''
},
// 弹出键盘事件
onClick: function () {
this.setData({
isShow: !this.data.isShow
})
},
// 键盘change
inputChange: function (e) {
let value = e.detail.val;
let type = e.detail.type;
let carNo = this.data.carNo;
carNo += value;
if (type == 1) {
this.setData({
keyBoardType: 2
})
}
this.setData({
carNo: carNo
})
},
// 键盘确定
inputOk: function (e) {
/* isCarPlate用于判断输入的车牌号是否符合规范 */
if (!this.isCarPlate(this.data.carNo)) {
wx.showToast({
title: '请输入正确的车牌号',
icon: 'none',
})
return false;
}
this.setData({
isShow: false,
// keyBoardType: 1
})
},
// 键盘删除
inputdelete: function (e) {
console.log(e);
let carNo = this.data.carNo;
carNo = carNo.substring(0, carNo.length - 1);
if (carNo.length == 0) {
this.setData({
keyBoardType: 1
})
}
this.setData({
carNo,
})
},
/* 判断车牌号 */
isCarPlate(vehicleNumber) {
let xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
let creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
if (vehicleNumber.length == 7) {
return creg.test(vehicleNumber);
} else if (vehicleNumber.length == 8) {
return xreg.test(vehicleNumber);
} else {
return false;
}
},
这篇关于小程序车牌号输入法实例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
微信小程序的接口信息py可以抓到吗？-icode9专业技术文章分享11-22
-
怎样解析出微信小程序二维码带的参数？-icode9专业技术文章分享11-22
-
微信小程序二维码怎样解析成链接？-icode9专业技术文章分享11-22
-
微信小程序接口地址的域名需要怎么设置？-icode9专业技术文章分享11-22
-
微信小程序的业务域名有什么作用-icode9专业技术文章分享11-22
-
微信小程序 image有类似html5的onload吗？-icode9专业技术文章分享11-22
-
微信小程序中怎么实现文本内容超出行数后显示省略号？-icode9专业技术文章分享11-22
-
微信小程序怎么实现分享样式定制和图片定制功能？-icode9专业技术文章分享11-22
-
微信小程序全栈教程：从零开始的全攻略11-20
-
微信小程序全栈学习：从零开始的完整指南11-19
-
微信小程序如何封装接口域名？-icode9专业技术文章分享11-13
-
如何在微信小程序中实现直传功能？-icode9专业技术文章分享11-13
-
如何在小程序的地图组件中添加标记和文字？-icode9专业技术文章分享11-13
-
在微信小程序的地图组件中如何实现自定义标记和气泡？-icode9专业技术文章分享11-13
-
微信小程序教程：零基础入门到实战11-01
栏目导航
