uniapp 小程序车牌号输入键盘

之前写微信小程序时封装了车牌号输入键盘，记录在微信小程序组件中了，最近开发uniapp又重新开发了车牌号输入键盘组件，是在微信小程序开发的键盘组件的思想上做了一版优化，增加了挂车车牌号输入，及新能源车辆车牌号输入功能，功能如下：

uniapp的编程风格和H5非常相近，所以如果是H5需要车牌号输入键盘稍加改动同样可用

html

<template><!--车牌号输入组件--><view v-if="show" class="trailer-keyboard"><u-popup :show="show" :closeOnClickOverlay="false"><view class="keyBoard_content"><!-- header --><view class="top-part flex"><view class="font-30 close" @click="closeKeyboard">x</view><view class="message color-333">输入车牌号</view><view class="font-30 confirm":class="{'confirm-active': confirmBtnFocus}"@click="confirmKeyboard">确定</view></view><!-- input checkbox --><view class="input-and-checkbox"><!-- input --><view class="license flex"><view v-for="(item,index) in codeList" :key="index"class="edit-text":class="{'border-active': currentFocus === index,'space-left': index === 2}"><view>{{item.value}}</view></view></view><!-- checkbox --><view v-if="vehicleType === 'car' && checkboxShow" class="checkbox-box"><!--  --><u-checkbox-groupclass="uCheckbox"v-model="checkboxList"@change="checkboxChange"><u-checkbox:label="'新能源车'":name="'新能源车'"shape="circle"activeColor="#27B57D":checked="isNewEnergy"></u-checkbox></u-checkbox-group></view></view><!-- 键盘 --><view class="keyboard-content"><!-- 省份键盘 --><template v-if="provinceBoardShow"><view class="province-keyboard flex"><view class="td td-nor color-333" v-for="(item,index) in provincesKeyList":key="index"@click="provinceKeyClick(item,index)"hover-class="board-active"hover-start-time="0" hover-stay-time="80">{{item}}</view></view></template><!--数字键盘--><template v-if="!provinceBoardShow"><view class="number-keyboard flex between"><template><view class="td td-num color-333" :class="numberIsDis ? 'board-active' : ''"v-for="(item,index) in numberKeyList":key="index"@click="numberKeyClick(item,index)":hover-class="numberIsDis ? '' : 'board-active'"hover-start-time="0" hover-stay-time="80">{{item}}</view></template></view></template><!--字母键盘--><template v-if="!provinceBoardShow"><view class="english-keyboard flex between"><template><view class="td td-num color-333" :class="englishIsDis ? 'board-active' : ''"v-for="(item,idx) in englishKeyOneList":key="idx"@click="englishKeyClick(item,idx)":hover-class="englishIsDis ? '' : 'board-active'" hover-start-time="0" hover-stay-time="80">{{item}}</view></template></view><!-- 最后一行 --><view class="english-keyboard flex englishtTwo"><template><view class="td td-num color-333":class="englishIsDis ? 'board-active' : ''"v-for="(item,index) in englishKeyTwoList":key="index"@click="englishKeyClick(item,index)":hover-class="englishIsDis ? '' : 'board-active'" hover-start-time="0" hover-stay-time="80">{{item}}</view></template><!-- 挂字键 --><template v-if="vehicleType === 'trailer'"><view@click="trailerFiledClick('挂')"class="td td-num color-333":class="trailerFiledIsDis ? 'board-active' : ''":hover-class="trailerFiledIsDis ? '' : 'board-active'"hover-start-time="0" hover-stay-time="80">挂</view></template></view></template><!--清除按钮--><view @click="backspace" class="delete flex" hover-class="board-active" hover-start-time="0"hover-stay-time="80"><image class="deleteImg" src="@/static/my/clear.png" /></view></view></view></u-popup></view>
</template>

<script>export default {name: 'trailerKeyboard',props: {// 组件显示show: {type: Boolean,default: false},// 初始传入车牌号vehicleNo: {type: String,default: ''},/*** 车辆牌照类型 默认挂车* trailer  挂车* car      汽车*/vehicleType: {type: String,default: 'trailer'},// 是否展示新能源切换按钮checkboxShow: {type: Boolean,default: true,}},data() {return {/*** currIndex 初始化为零  控制确定按钮高亮* currentFocus 初始化为零 控制输入框高亮*/numberIsDis: true, // 输入键盘不可点击 true为不可点击englishIsDis: false, // 字母键盘可点击provinceBoardShow: true, // 省键盘isNewEnergy: false, // 是否新能源checkboxList: [],trailerFiledIsDis: true, // 挂字禁用provincesKeyList: '京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新',numberKeyList: '0123456789',englishKeyOneList: 'ABCDEFGHJKLMNPQRSTUV',englishKeyTwoList: 'WXYZ',currentFocus: 0,currIndex: 0,plateLimit: 7, // 车牌号位数codeList: [],// codeReset: []};},watch: {show: {handler(val) {this.initData()},immediate: true,}},computed: {confirmBtnFocus() {return this.currIndex === this.codeList.length}},methods: {// 省份键盘provinceKeyClick(val,index) {this.currentFocus++;this.currIndex++;this.codeList[0].value = val;this.provinceBoardShow = false;this.numberIsDis = true;this.englishIsDis = false;},// 数字键盘numberKeyClick(val,idx) {if(this.numberIsDis) return if (this.currIndex >= this.codeList.length) returnthis.currIndex++;this.currentFocus = this.currIndex;this.codeList[this.currIndex - 1].value = val;if(this.vehicleType === 'trailer') {this.setTrailerKeyboardDis()}},// 字母键盘englishKeyClick(val,idx) {if(this.englishIsDis) returnif (this.currIndex >= this.codeList.length) returnthis.currIndex++;this.currentFocus = this.currIndex;this.codeList[this.currIndex - 1].value = val;if(this.currIndex === 2) this.numberIsDis = false;if(this.vehicleType === 'trailer') {this.setTrailerKeyboardDis()}},// 挂字点击trailerFiledClick(val) {if(this.trailerFiledIsDis) returnif (this.currIndex > this.codeList.length - 1) returnthis.currIndex++;this.currentFocus = this.currIndex + 1;this.codeList[this.currIndex - 1].value = val;},// 设置挂车键盘禁用（最后一个只能选择挂）setTrailerKeyboardDis() {if(this.currIndex + 1 === this.codeList.length) {this.numberIsDis = true;this.englishIsDis = true;this.trailerFiledIsDis = false;}},// 退格backspace() {if (!this.currIndex) returnthis.currIndex--;this.codeList[this.currIndex].value = '';this.currentFocus = this.currIndex;this.provinceBoardShow = this.currIndex === 0;if(this.currIndex === 1) this.numberIsDis = true;if(this.vehicleType === "trailer" && this.currIndex === this.codeList.length - 2) {    this.numberIsDis = false;this.englishIsDis = false;this.trailerFiledIsDis = true;}},// 关闭closeKeyboard(e) {this.$emit('update:show',false)this.$emit('close')},// 确定confirmKeyboard(e) {if (this.currIndex < this.codeList.length) returnlet plate = ''this.codeList.map(item => (plate += item.value))this.$emit('confirm', plate)this.closeKeyboard()},// 是否新能源车牌checkbox changecheckboxChange(val) {console.log(val,'checkbox change');this.isNewEnergy = val.length ? true : false;if(val.length) {this.codeList.push({value: ''})// this.codeReset.push({value: ''})} else {this.codeList.splice(this.codeList.length - 1,1)// this.codeReset.splice(this.codeList.codeReset - 1,1)let vehicleNo = "";this.codeList.map(item => (vehicleNo += item.value))if(vehicleNo.length === this.codeList.length && this.currIndex > this.codeList.length) {this.currIndex--;this.currentFocus--}}},initData() {console.log('initData',this.isNewEnergy);console.log(this.checkboxList);let temp = []// let reset = []const vehicleNoTrim = this.vehicleNo.trim()const Leng = vehicleNoTrim ? vehicleNoTrim.length : 0;// 新能源checkbox回显this.isNewEnergy = Leng > 7 ? true : false;this.checkboxList = Leng > 7 ? ['新能源车'] : []if (Leng) {let arr = vehicleNoTrim.split('')arr.forEach(item => {temp.push({value: item})// reset.push({value: ''})})} else {// 初始化设置数据for (let index = 0; index < this.plateLimit; index++) {temp.push({value: ''})// reset.push({value: ''})}}// 解决车牌号回显位数不够问题if(Leng > 0 && Leng < 7) {let num = 7 - Leng;for(let i = 0; i < num; i++) {temp.push({value: ''})}}// 禁用设置this.isNewEnergy = Leng > 7 ? true : false;this.provinceBoardShow = Leng > 0 ? false : true;this.numberIsDis = Leng < 2 ? true : false;this.englishIsDis = false;if(this.vehicleType === 'trailer') {if(Leng >= 6) {this.numberIsDis = true;this.englishIsDis = true;}this.trailerFiledIsDis = Leng < 6 ? true: false;} this.codeList = temp;// this.codeReset = reset;this.currentFocus = Leng;this.currIndex = vehicleNoTrim ? vehicleNoTrim.length : 0;}},}
</script>

css

<style lang="scss" scoped>.flex {display: flex;}.between {justify-content: space-between;}.font-30 {font-size: 30rpx;}.color-333 {color: #333333;}.trailer-keyboard {}.keyBoard_content {z-index: 9999;position: fixed;bottom: 0;left: 0;width: 100%;height: auto;background: #fff;.top-part {width: 100%;padding: 25rpx 40rpx;height: 92rpx;justify-content: center;align-items: center;box-sizing: border-box;border-bottom: 1rpx solid #EAEAEA;margin-bottom: 15rpx;text-align: center;.close {width: 10%;font-size: 47rpx;color: #A0A0A0;}.message {font-size: 15px;width: 80%;text-align: center;font-weight: Semibold;}.confirm {width: 10%;color: #A0A0A0;font-weight: Regular;&.confirm-active {color: #27B57D;}}}.input-and-checkbox {.license {box-sizing: border-box;justify-content: space-around;margin: 72rpx 86rpx 30rpx;.edit-text {height: 80rpx;line-height: 80rpx;width: 60rpx;border: 1rpx solid #A0A0A0;border-radius: 8rpx;text-align: center;font-size: 36rpx;&.space-left {// margin-left: 30rpx;}&.border-active {border: 1rpx solid #5BCA92;}}}.checkbox-box {margin: 25rpx 86rpx 28rpx;display: flex;justify-content: flex-end;.uCheckbox {}}}.keyboard-content {width: 100%;height: 450rpx;box-sizing: border-box;position: relative;.td {font-family: "PingFangSC";font-size: 34rpx;color: #333333;font-weight: 500;margin: 12rpx 4rpx;border: 1rpx solid #E0E0E0;border-radius: 8rpx;height: 84rpx;line-height: 84rpx;text-align: center;}.province-keyboard {margin: 0 50rpx;flex-wrap: wrap;.td-nor {flex: 0 1 9%;margin-right: 3px;}}.number-keyboard {margin: 0 5rpx;.td-num {flex: 0 1 8%;}}.english-keyboard {margin: 0 5rpx;flex-wrap: wrap;&.englishtTwo {margin-left: 80rpx;.td-num {margin-right: 5px;flex: 0 1 8.8%;}}.td-num {flex: 0 1 8%;}}.board-active {box-shadow: 0 0 0 #e5e5e5;background: #e5e5e5;}.delete {width: 140rpx;height: 84rpx;text-align: center;background-color: #D8D8D8;border-radius: 8rpx;position: absolute;right: 73rpx;bottom: 30rpx;justify-content: center;align-items: center;.deleteImg {width: 44rpx;height: 30rpx;}}}}
</style>

使用

<!-- vehicleType  车牌号组件类型 默认挂车trailer  普通车牌号为car -->
<TrailerKeyboard :show.sync="trailerKeyboardShow" :vehicleNo="trailerForm.trailerNo"@confirm="keyboardconfirm"vehicleType="car"
></TrailerKeyboard>

uniapp 小程序车牌号输入键盘相关推荐

微信小程序车牌号组件，车牌号键盘，兼容新能源号牌
话不多说,先看图使用方法: 一.将组件代码放入项目任意目录二.在需要使用键盘组件的页面json文件配置引入组件三.在模板页面wxml调用组件 <carNumber custom-input ...
小程序车牌号模拟虚拟键盘选择。车牌号虚拟键盘。作为组件使用
这里是作为组件使用的. 1.新建组件carCity 组件wxml书写 <view class='car'><view bindtap='showCity' class='carNo ...
微信小程序自定义车牌号输入键盘-附源码
键盘已做过处理第一位只能是省份简称,第二位只能输入字母,第三位以后可以输入数字加字母的组合,输入完成后有正则方法校验车牌号的合法性.高效率车牌号输入键盘,大大提升用户体验,增强用户输入车牌号的真实性 ...
小程序验证车牌号（含新能源车牌）
之前写的一个,小程序扫描二维码,正则校验:https://www.jianshu.com/p/61217e42a143,现在又遇到了一个小程序验证车牌号(含新能源车牌)的需求,其实思想是类似的,一并写 ...
uniapp小程序迁移到TS
uniapp小程序迁移到TS 我一直在做的小程序就是山科小站也已经做了两年了,目前是用uniapp构建的,在这期间也重构好几次了,这次在鹅厂实习感觉受益良多,这又得来一次很大的重构,虽然小程序功能 ...
uni-app 小程序多图上传
uni-app 小程序多图上传: 官方提示说,App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API.所以跨端的写法就是循环调用本API 步骤: //1.首先通过 uni.c ...
uniapp小程序发布经验
一.概述 uniapp已经开发好了,有需求转为小程序发布,一般上转为微信小程序. 这里以微信小程序为例. 二.转化方法 1.打开HBuilder X开发工具: 2.打开uniapp代码: 3.点击菜单 ...
uniapp小程序开发设置系统状态栏高度、全屏背景图设置
效果: uniapp小程序开发设置系统状态栏高度/全屏背景图设置 <view class="login"><view class="status_bar ...
uni-app小程序分享
uni-app小程序分享(全局) 在common文件下share.js export default {data() {return {share: {// 转发的标题 (默认标题)title: '' ...

uniapp 小程序车牌号输入键盘

uniapp 小程序车牌号输入键盘相关推荐

最新文章

热门文章