微信公众号开发
小程序车牌号输入法实例
本文主要是介绍小程序车牌号输入法实例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
效果图：如下
子组件
组件：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;
}
},
这篇关于小程序车牌号输入法实例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
微信小程序教程：零基础入门到实战11-01
-
微信小程序全栈教程：从入门到实践11-01
-
微信小程序怎么实现关注公众号功能-icode9专业技术文章分享10-31
-
微信小程序cover-view，支持bindtap吗-icode9专业技术文章分享10-30
-
微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享10-30
-
微信小程序web-view怎么设置高度？-icode9专业技术文章分享10-30
-
微信小程序中 onLoad和onready哪个先加载-icode9专业技术文章分享10-30
-
小程序 wx.getStorageSync('token')如何清除-icode9专业技术文章分享10-29
-
小程序防止冒泡e.stopPropagation()是什么-icode9专业技术文章分享10-29
-
小程序的点击事件页面如何写-icode9专业技术文章分享10-29
-
微信小程序如何使用echarts的折线图-icode9专业技术文章分享10-25
-
微信小程序 如何获取页面路径-icode9专业技术文章分享10-21
-
微信小程序css如何做有点儿发亮的红色按钮-icode9专业技术文章分享10-19
-
小程序 怎么用view实现内容换行-icode9专业技术文章分享10-19
-
html换行<br/>，小程序wxml换行是什么-icode9专业技术文章分享10-19
栏目导航
