vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）

一、效果图

二、说明

支持点击输入框删除或输入车牌，可直接在uniapp项目中运行，将view标签换为div、并且将rpx单位换成px可在vue项目里运行

三、代码

<template><view class="containers"><view class="parking-box">农批市场</view><view class="car_input_box"><view>请输入正确的车牌</view><view class="car_number_input"><view class="car_type"><view class="default_car" :class="{active_car : activeNum == '0'}"@click="chooseNumber(carNumber[0],'0')"><view class="" v-show="carNumber[0]">{{carNumber[0]}}</view></view><view class="default_car default_car1" :class="{active_car: activeNum == '1'}"@click="chooseNumber(carNumber[1],'1')"><view class="" v-show="carNumber[1]">{{carNumber[1]}}</view></view><view class="default_dot"></view><view class="default_car" :class="{active_car:activeNum == '2'}"@click="chooseNumber(carNumber[2],'2')"><view class="" v-show="carNumber[2]">{{carNumber[2]}}</view></view><view class="default_car" :class="{active_car : activeNum == '3'}"@click="chooseNumber(carNumber[3],'3')"><view class="" v-show="carNumber[3]">{{carNumber[3]}}</view></view><view class="default_car" :class="{active_car : activeNum == '4'}"@click="chooseNumber(carNumber[4],'4')"><view class="" v-show="carNumber[4]">{{carNumber[4]}}</view></view><view class="default_car" :class="{active_car : activeNum == '5'}"@click="chooseNumber(carNumber[5],'5')"><view class="" v-show="carNumber[5]">{{carNumber[5]}}</view></view><view class="default_car" :class="{active_car : activeNum == '6'}"@click="chooseNumber(carNumber[6],'6')"><view class="" v-show="carNumber[6]">{{carNumber[6]}}</view></view><view class="default_car":class="{diabled_car:currentIndex != 1,active_car:activeNum == '7' && currentIndex == 1}"@click="chooseNumber(carNumber[7],'7')"><view class="" v-show="carNumber[7]">{{carNumber[7]}}</view></view></view></view><view class="check_energy"><view><img src="../../static/img/duoxuan_weixuan.png" alt="" v-if="currentIndex == 1"@click="chooseIsNewEnergy"><img src="../../static/img/duoxuanwei.png" alt="" v-else @click="chooseIsNewEnergy"></view><view>新能源车牌号</view></view><view class="confirm_btn" @click="submit">确认</view></view><view class="tips">注: 请认真核对车牌，以免支付错误！</view><!-- 键盘 --><view class="keyboard-content"><!-- 省份键盘 --><template v-if="provinceBoardShow"><view style="position: relative;"><view class="province-keyboard flex jus-center"><view class="td-nor color-333 province-td" v-for="(item,index) in provincesKeyList" :key="index"@click="provinceKeyClick(item,index)" hover-class="board-active" hover-start-time="0"hover-stay-time="80"><view class="province-font">{{item}}</view></view></view><view class="province-keyboard flex jus-center"><view class="td-nor color-333 province-td" v-for="(item,index) in provincesKeyTwo" :key="index"@click="provinceKeyClick(item,index)" hover-class="board-active" hover-start-time="0"hover-stay-time="80"><view class="province-font">{{item}}</view></view></view><view class="province-keyboard flex jus-center"><view class="td-nor color-333 province-td" v-for="(item,index) in provincesKeyThree":key="index" @click="provinceKeyClick(item,index)" hover-class="board-active"hover-start-time="0" hover-stay-time="80"><view class="province-font">{{item}}</view></view></view><view class="province-keyboard flex"><view class="td-nor color-333 province-td" v-for="(item,index) in provincesKeyFour" :key="index"@click="provinceKeyClick(item,index)" hover-class="board-active" hover-start-time="0"hover-stay-time="80"><view class="province-font">{{item}}</view></view></view><view @click.stop="backspace" class="delete flex del-province"><img src="../../static/img/del@2x.png" class="del-con" alt=""></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 between"><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><!-- <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> --><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><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><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><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 @click.stop="backspace" class="delete flex"><img src="../../static/img/del@2x.png" class="del-con" alt=""></view></view></template></view></view>
</template><script>export default {name: "add-car-input",data() {return {current: 0,carNumber: [],carTypeList: [{text: '新能源',value: 1,}],currentIndex: 0,provincesKeyList: '京津冀晋蒙辽吉黑',provincesKeyTwo: '沪苏浙皖闽赣鲁豫',provincesKeyThree: '鄂湘粤桂琼渝川贵',provincesKeyFour: '云藏陕甘青宁新',provinceBoardShow: true, // 省键盘numberKeyList: '1234567890',numberIsDis: true, // 输入键盘不可点击 true为不可点击englishIsDis: false, // 字母键盘可点击englishKeyOneList: 'ABCDEFGHJKLMNPQRSTUV',englishKeyTwoList: 'WXYZ',trailerFiledIsDis: true, // 挂字禁用activeNum: '0',isClickCarNum: false,isCheckEnergy: false,};},watch: {'carNumber.length': {handler(newVal, oldValue) {console.log(newVal, oldValue, 'newVal, oldValue')this.setTrailerKeyboardDis()},deep: true}},methods: {//  确定按钮submit() {//普通车车牌校验const carCardP =/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;//新能源车牌校验const carCardD =/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;let carPlate = this.carNumber.join('')console.log(this.carNumber, carPlate, 'carNumber')if (this.carNumber.length == 0) {uni.showToast({title: '请输入车牌号',icon: 'none',duration: 2000})return;}if (!carCardP.test(carPlate) && (this.currentIndex == 0)) {// 普通车uni.showToast({title: '车牌号输入有误',icon: 'none',duration: 2000})return;}if (!carCardD.test(carPlate) && this.currentIndex == 1) {// 新能源uni.showToast({title: '车牌号输入有误',icon: 'none',duration: 2000})return;}},// 点击车牌号输入框chooseNumber(item, active) {console.log(item, active, 'itemsss')if (active == 1) {// 第二位this.numberIsDis = truethis.provinceBoardShow = false} else if (active == '0') {// 第一位this.provinceBoardShow = truethis.numberIsDis = true} else {this.numberIsDis = falsethis.provinceBoardShow = false}if (this.currentIndex == 0 && active == '7') {// 普通车牌 不让点击一位} else {this.activeNum = activethis.current = activethis.isClickCarNum = true}if ((this.currentIndex == 0 && this.carNumber.length >= 6 && this.current >= 6) || (this.currentIndex ==1 && this.carNumber.length >= 7 && this.current >= 7)) {this.trailerFiledIsDis = false;} else {this.trailerFiledIsDis = true;}},// 点击新能源或者普通车chooseIsNewEnergy() {console.log(this.carNumber, '切换新能源')if (this.currentIndex == 1) {this.currentIndex = 0if (this.carNumber.length == 8) {this.carNumber.pop()}} else {this.currentIndex = 1if (this.carNumber.length == 7) {this.current = 7this.activeNum = 7}}console.log(this.carNumber, '切换新能源后')this.$forceUpdate()},// 省份键盘provinceKeyClick(val, index) {console.log(this.currentIndex, this.carNumber.length, 'this.carNumber.length省')this.carNumber[0] = valthis.provinceBoardShow = falsethis.numberIsDis = true;this.englishIsDis = false;this.current++this.activeNum = this.currentthis.$forceUpdate()console.log(this.current, 'current')},// 数字键盘numberKeyClick(val, idx) {let flag = this.carNumber.indexOf("") === -1console.log(this.currentIndex, this.carNumber, flag, this.carNumber.length, 'this.carNumber.length数字')if (this.numberIsDis) returnif ((this.currentIndex == 0 && this.carNumber.length >= 7 && this.current >= 7) || (this.currentIndex ==1 && this.carNumber.length >= 8 && this.current >= 8)) {return}console.log(111)this.current++this.carNumber[this.current - 1] = val;this.setTrailerKeyboardDis()this.$forceUpdate()this.activeNum = this.currentthis.numberIsDis = falseconsole.log(this.current, 'current')console.log(this.currentIndex, this.carNumber, flag, this.carNumber.length, 'this.carNumber.length数字后')},// 字母键盘englishKeyClick(val, idx) {let flag = this.carNumber.indexOf("") === -1console.log(this.currentIndex, this.carNumber, flag, this.carNumber.length, 'this.carNumber.length字母')// this.activeNum = this.carNumber.lengthif (this.englishIsDis) returnif ((this.currentIndex == 0 && this.carNumber.length >= 7 && this.current >= 7) || (this.currentIndex ==1 && this.carNumber.length >= 8 && this.current >= 8)) {return}console.log(222)this.current++this.carNumber[this.current - 1] = val;console.log(this.current, 'this.current 字母键盘')if (this.current == 2) this.numberIsDis = false;this.setTrailerKeyboardDis()this.$forceUpdate()this.activeNum = this.currentthis.numberIsDis = falseconsole.log(this.current, 'current')console.log(this.currentIndex, this.carNumber, flag, this.carNumber.length, 'this.carNumber.length字母后')},// 设置挂车键盘禁用（只能最后一个选择挂）setTrailerKeyboardDis() {if ((this.currentIndex == 0 && this.carNumber.length >= 6 && this.current >= 6) || (this.currentIndex ==1 && this.carNumber.length >= 7 && this.current >= 7)) {this.trailerFiledIsDis = false;} else {this.trailerFiledIsDis = true;}},// 点击挂字trailerFiledClick(val) {console.log(val, this.trailerFiledIsDis, '挂字')if (this.trailerFiledIsDis) returnif ((this.currentIndex == 0 && this.carNumber.length >= 7 && this.current >= 7) || (this.currentIndex ==1 && this.carNumber.length >= 8 && this.current >= 8)) {console.log(111222)return}this.current++this.carNumber[this.current - 1] = val;this.activeNum = this.currentthis.$forceUpdate()console.log(this.carNumber, this.current, 'gua')},// 删除键backspace() {console.log(this.current, 'current')if (this.current < 0) returnif (this.current == 0) {this.provinceBoardShow = truethis.activeNum = 0this.carNumber[0] = ''console.log(this.carNumber[0], 'this.carNumber[0]')this.$forceUpdate()return// this.numberIsDis = true// this.englishIsDis = true// this.trailerFiledIsDis = true} else if (this.current == 1) {this.provinceBoardShow = truethis.activeNum = 1this.carNumber[1] = ''} else if (this.current == 2) {this.provinceBoardShow = falsethis.numberIsDis = truethis.carNumber[this.current] = ''} else {this.provinceBoardShow = falsethis.carNumber[this.current - 1] = ''}if ((this.currentIndex == 0 && this.current <= 6) || (this.currentIndex == 1 && this.current <= 7)) {this.trailerFiledIsDis = true;} else {this.trailerFiledIsDis = false;}this.current--this.activeNum = this.currentthis.$forceUpdate()console.log(this.carNumber, '删除后车牌号')},}}
</script><style lang="scss" scoped>.containers {box-sizing: border-box;}.parking-box {width: 100%;height: 254rpx;background: linear-gradient(180deg, #11B690 0%, #11B690 100%);font-size: 44rpx;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #FFFFFF;text-align: center;padding-top: 52rpx;box-sizing: border-box;}.car_input_box {width: 702rpx;height: 440rpx;background: #FFFFFF;box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.06);border-radius: 12rpx;margin: -86rpx auto 0;font-size: 32rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #333333;text-align: center;padding: 40rpx 20rpx;box-sizing: border-box;}@keyframes fade {from {opacity: 1.0;}50% {opacity: 0;}to {opacity: 1.0;}}@-webkit-keyframes fade {from {opacity: 1.0;}50% {opacity: 0;}to {opacity: 1.0;}}.flex {display: flex;}.between {justify-content: space-between;align-items: center;}.font-30 {font-size: 30rpx;}.color-333 {color: #333333;}.car_type {display: flex;justify-content: space-between;margin: 0 auto;width: 100%;align-items: center;}.default_car {width: 72rpx;height: 94rpx;background: #FFFFFF;border-radius: 4rpx;border: 2rpx solid rgba(0, 0, 0, 0.1);text-align: center;line-height: 94rpx;font-size: 40rpx;font-weight: bold;color: #333333;}.line {color: #EA4070;border-radius: 2rpx;animation: fade 1500ms infinite;-webkit-animation: fade 1500ms infinite;}.car_type_box {display: flex;justify-content: start;width: 390rpx;margin: 0 auto;}.car_type_item {width: 130rpx;height: 69rpx;border: 1px solid #999999;text-align: center;line-height: 69rpx;font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #999999;}.check_energy {font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #6D7278;display: flex;justify-content: flex-end;margin-top: 16rpx;}.check_energy img {width: 32rpx;height: 32rpx;margin-right: 8rpx;}.car_type_item:nth-child(1) {border-radius: 6rpx 0rpx 0rpx 6rpx;border-right: 0.5rpx solid #999999;}.car_type_item:nth-child(2) {border-right: none;border-left: none;}.car_type_item:nth-child(3) {border-radius: 0rpx 6rpx 6rpx 0rpx;}.active {width: 130rpx;height: 69rpx;border: 1px solid #999999;text-align: center;line-height: 69rpx;font-size: 30rpx;font-family: PingFang SC;font-weight: 500;font-weight: bold;color: #EA4070;background: rgba(#EA4070, .1);}.active:nth-child(1) {border-radius: 6rpx 0rpx 0rpx 6rpx;border-right: 0.5rpx solid #999999;}.active:nth-child(2) {border-right: none;border-left: none;}.active:nth-child(3) {border-radius: 0rpx 6rpx 6rpx 0rpx;}.car_number_input {margin-top: 40rpx;}.tips {font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #6D7278;margin: 16rpx 24rpx;}.add_car_box {width: calc(100% - 64rpx);height: 80rpx;background: linear-gradient(180deg, #DF4270, #F299AB);border-radius: 40rpx;margin: 0 auto;}.add_car {height: 100%;line-height: 80rpx;font-size: 34rpx;font-weight: 500;color: #FFFFFF;text-align: center;}.dis_car {height: 100%;line-height: 80rpx;font-size: 34rpx;font-weight: 500;color: #FFFFFF;background: #999999;text-align: center;border-radius: 40px;}.keyboard-content {width: 100%;height: 470rpx;box-sizing: border-box;position: fixed;bottom: 0;left: 0;background-color: rgba(205, 208, 212, 0.92);padding-top: 13rpx;}.td {font-family: "PingFangSC";font-size: 34rpx;color: #333333;font-weight: 500;margin: 12rpx 1rpx;background: #FCFCFE;box-shadow: 0rpx 2rpx 0rpx 0rpx #898A8D;border-radius: 9rpx;height: 84rpx;line-height: 84rpx;text-align: center;background-color: #fff;}.province-keyboard {margin: 0 5rpx;padding: 0 10rpx;// flex-wrap: wrap;}.td-nor {// flex: 0 1 9%;// margin-right: 3px;}.number-keyboard {margin: 0 5rpx;}.board-active {box-shadow: 0 0 0 #e5e5e5;background: #e5e5e5;}.english-keyboard {margin: 0 5rpx;flex-wrap: wrap;}.td-num {flex: 0 1 9%;}.board-active {box-shadow: 0 0 0 #e5e5e5;background: #e5e5e5;}.delete {width: 144rpx;height: 88rpx;text-align: center;background-color: #AAADB7;border-radius: 8rpx;// position: absolute;// right: 8rpx;// bottom: 30rpx;justify-content: center;align-items: center;box-shadow: 0rpx 2rpx 0rpx 0rpx #898A8D;}.del-province {position: absolute;right: 28rpx;bottom: 13rpx;width: 64rpx;box-shadow: 0rpx 2rpx 0rpx 0rpx #898A8D;border-radius: 9rpx;font-family: "PingFangSC";font-size: 34rpx;color: #333333;font-weight: 500;// margin: 12rpx auto;background: #FCFCFE;box-shadow: 0rpx 2rpx 0rpx 0rpx #898A8D;border-radius: 9rpx;height: 84rpx;line-height: 84rpx;text-align: center;background: #AAADB7;}.sure {width: 100rpx;height: 84rpx;text-align: center;background-color: #AFB2BC;border-radius: 8rpx;position: absolute;right: 10rpx;bottom: 30rpx;justify-content: center;align-items: center;}.default_dot {width: 8rpx;height: 8rpx;background: #333333;margin: 0 4rpx;}.del-con {width: 44rpx;height: 32rpx;}.jus-center {justify-content: center;}.diabled_car {background: #F5F5F5;border-radius: 4rpx;border: 2rpx solid rgba(0, 0, 0, 0.1);}.active_car {border-radius: 4rpx;border: 2rpx solid #375DE9;}.province-mr {margin-right: 10rpx;}.confirm_btn {width: 662rpx;height: 92rpx;line-height: 92rpx;background: #11B690;font-size: 32rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;border-radius: 46rpx;margin-top: 40rpx;}.province-td {width: 12.5%;}.province-font {width: 64rpx;box-shadow: 0rpx 2rpx 0rpx 0rpx #898A8D;border-radius: 9rpx;font-family: PingFangSC-Regular, PingFang SC;font-size: 34rpx;color: #000;font-weight: 500;margin: 12rpx auto;box-shadow: 0rpx 2rpx 0rpx 0rpx #898A8D;border-radius: 9rpx;height: 84rpx;line-height: 84rpx;text-align: center;background-color: #fff;}.confirm-cash-box {width: 100vh;height: 100vh;background-color: rgba(0, 0, 0, 0.7);position: fixed;top: 0;left: 50%;transform: translateX(-50%);z-index: 99;}.cash-box {width: 570rpx;//height: 300px;background: rgb(223, 223, 223);border-radius: 28rpx;margin: 30vh auto 0;text-align: center;min-height: 200rpx;}.cash-title {font-size: 34rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #000000;padding-top: 38rpx;margin: 0 0 24rpx;}.content-cash {font-size: 26rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #000000;margin-bottom: 54rpx;padding: 0 32rpx;}.line-cash {width: 100%;height: 1rpx;background: rgba(60, 60, 67, 0.29);}.cancel-box {width: 100%;height: 88rpx;line-height: 88rpx;color: #11B690;font-size: 32rpx;text-align: center;}.flex-btwn {display: flex;align-items: center;justify-content: space-between;}
</style>

vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）相关推荐

移动端车牌号键盘组件
记录下小组件,方便日后用到 template <template><view class="main"><view class="title ...
uniapp 小程序车牌号输入键盘
之前写微信小程序时封装了车牌号输入键盘,记录在微信小程序组件中了,最近开发uniapp又重新开发了车牌号输入键盘组件,是在微信小程序开发的键盘组件的思想上做了一版优化,增加了挂车车牌号输入,及新能源车 ...
微信小程序自定义车牌号输入键盘-附源码
键盘已做过处理第一位只能是省份简称,第二位只能输入字母,第三位以后可以输入数字加字母的组合,输入完成后有正则方法校验车牌号的合法性.高效率车牌号输入键盘,大大提升用户体验,增强用户输入车牌号的真实性 ...
用vue写的移动端车牌号输入法
效果图: (录制了视频演示,然而不会上传.....心塞.....) 本页面所在项目已上传GitHub,github下载地址:https://github.com/dan-Zd/car-vueapp ...
Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）
项目中展示图表的地方很多,不想每次都写一长串的 options配置,就整合了一下常用的配置项,简单封装了一下,也能保证整个系统的图表风格统一,需要调整样式的时候也不用改很多地方 2022-11-07: ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
pc 图片预览放大端vue_移动端Vue.js的图片预览组件，支持放缩、滑动功能！
功能:图片预览组件,支持双手指放大/缩小,双击放大/缩小,单击消失隐藏. 注:touch事件请手机预览源码分享组件参数 data() { return { loading: 2, // 1成功 2 ...
车牌号校验规则，包括新能源车
车牌号通用校验规则:可输入7-8为字符 1.首字符输入:京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼 2.第二位:大写字母,不能输字母I和O 3.第三到八位:大写字母和数字组合,但是 ...
python车牌号4位数_4位数吉祥车牌号码大全这是常见的数字组合
车牌号4位数字组合的形式最常见,在玄学角度,每个数字都是一种符号,不同的数字组合其蕴藏的能量千变万化. 所谓"三才得配"是指天.地.人三者的关系要处理恰当,人生活在天地之间,一定要 ...

vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）

一、效果图

二、说明

三、代码

vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）相关推荐

最新文章

热门文章