uniapp 车牌号输入 车牌号键盘 新能源车牌键盘 特殊车辆车牌键盘

news/2025/1/3 5:18:25/

1：效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2：代码：

<template><view class="container"><view class="car_type_box"><view :class="[currentIndex == index ? 'active' : 'car_type_item']" v-for="(item, index) in carTypeList" :key="index" @click.stop="typeCurrent(index)">{{item.name}}</view></view><view class="car_number_input"><view class="car_type" @click.stop="keyShow = !keyShow"><view class="default_car"><view class="" v-show="carNumber[0]">{{carNumber[0]}}</view><view class="line" v-show="!carNumber[0]">__</view></view><view class="default_car"><view class="" v-show="carNumber[1]">{{carNumber[1]}}</view><view class="line" v-show="carNumber[0] && !carNumber[1]">__</view></view><view class="default_car"><view class="" v-show="carNumber[2]">{{carNumber[2]}}</view><view class="line" v-show="carNumber[0] && carNumber[1] && !carNumber[2]">__</view></view><view class="default_car"><view class="" v-show="carNumber[3]">{{carNumber[3]}}</view><view class="line" v-show="carNumber[0] && carNumber[1] && carNumber[2] && !carNumber[3]">__</view></view><view class="default_car"><view class="" v-show="carNumber[4]">{{carNumber[4]}}</view><view class="line" v-show="carNumber[0] && carNumber[1] && carNumber[2] && carNumber[3] && !carNumber[4]">__</view></view><view class="default_car"><view class="" v-show="carNumber[5]">{{carNumber[5]}}</view><view class="line" v-show="carNumber[0] && carNumber[1] && carNumber[2] && carNumber[3] && carNumber[4] && !carNumber[5]">__</view></view><view class="default_car"><view class="" v-show="carNumber[6]">{{carNumber[6]}}</view><view class="line" v-show="carNumber[0] && carNumber[1] && carNumber[2] && carNumber[3] && carNumber[4] && carNumber[5] && !carNumber[6]">__</view></view><view class="default_car" v-show="currentIndex == 1"><view class="" v-show="carNumber[7]">{{carNumber[7]}}</view><view class="line" v-show="carNumber[0] && carNumber[1] && carNumber[2] && carNumber[3] && carNumber[4] && carNumber[5] && carNumber[6] && !carNumber[7]">__</view></view></view></view><view class="tips">注：请输入真实有效的车牌号</view><view class="add_car_box" @click.stop="addCar"><view :class="[sureColor ? 'add_car' : 'dis_car']">确认</view></view><!-- 键盘 --><view class="keyboard-content" v-show="keyShow"><!-- 省份键盘 --><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><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></template></view><!--清除按钮--><view @click.stop="backspace" class="delete flex" v-show="keyShow">清除</view><view @click.stop="sure" class="sure flex" v-show="keyShow">确定</view></view>
</template><script>export default {name:"add-car-input",data() {return {keyShow: true, // 键盘是否显示sureColor: false,current: 0,carNumber: [],// carNumber: ['陕', 'A', '8', '8', '8', '8', '8', '8'],carTypeList: [{name: '普通车'},{name: '新能源'},{name: '黄牌车'}],currentIndex: 0,provincesKeyList: '京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新',provinceBoardShow: true, // 省键盘numberKeyList: '0123456789',numberIsDis: true, // 输入键盘不可点击 true为不可点击englishIsDis: false, // 字母键盘可点击numberKeyList: '0123456789',englishKeyOneList: 'ABCDEFGHJKLMNPQRSTUVWX',englishKeyTwoList: 'YZ',trailerFiledIsDis: true, // 挂字禁用};},onLoad() {},onShow() {},watch: {'carNumber.length': {handler(newVal, oldValue) {console.log(newVal, oldValue, 'newVal, oldValue')if((this.currentIndex == 0 && newVal <= 6) || (this.currentIndex == 2 && newVal <= 6) || (this.currentIndex == 1 && newVal <= 7)) {this.sureColor = false} else {this.sureColor = true}this.setTrailerKeyboardDis()},deep: true}},methods: {typeCurrent (index) {this.currentIndex = indexthis.carNumber = []this.current = 0this.provinceBoardShow = truethis.numberIsDis = true;this.englishIsDis = truethis.trailerFiledIsDis = true;this.$forceUpdate()},// 省份键盘provinceKeyClick(val,index) {this.carNumber[0] = valthis.provinceBoardShow = falsethis.numberIsDis = true;this.englishIsDis = falsethis.current++this.$forceUpdate()console.log(this.current, 'current')},// 数字键盘numberKeyClick(val,idx) {console.log(this.currentIndex, this.carNumber.length, 'this.carNumber.length00')if(this.numberIsDis) returnif((this.currentIndex == 0 && this.carNumber.length >= 6) || (this.currentIndex == 2 && this.carNumber.length >= 6) || (this.currentIndex == 1 && this.carNumber.length >= 7)) {this.sureColor = true}if((this.currentIndex == 0 && this.carNumber.length >= 7) || (this.currentIndex == 2 && this.carNumber.length >= 7) || (this.currentIndex == 1 && this.carNumber.length >= 8)) returnthis.current++this.carNumber[this.current - 1] = val;this.setTrailerKeyboardDis()this.$forceUpdate()console.log(this.current, 'current')},// 字母键盘englishKeyClick(val,idx) {console.log(this.currentIndex, this.carNumber.length, 'this.carNumber.length')if(this.englishIsDis) returnif((this.currentIndex == 0 && this.carNumber.length >= 6) || (this.currentIndex == 2 && this.carNumber.length >= 6) || (this.currentIndex == 1 && this.carNumber.length >= 7)) {this.sureColor = true}if((this.currentIndex == 0 && this.carNumber.length >= 7) || (this.currentIndex == 2 && this.carNumber.length >= 7) || (this.currentIndex == 1 && this.carNumber.length >= 8)) returnconsole.log('hello')this.current++this.carNumber[this.current - 1] = val;if(this.current == 2) this.numberIsDis = false;this.setTrailerKeyboardDis()this.$forceUpdate()console.log(this.current, 'current')},// 设置挂车键盘禁用（只能最后一个选择挂）setTrailerKeyboardDis() {if((this.currentIndex == 0 && this.carNumber.length >= 6) || (this.currentIndex == 2 && this.carNumber.length >= 6)) {this.trailerFiledIsDis = false;} else {this.trailerFiledIsDis = true;}},// 点击挂字trailerFiledClick (val) {if(this.trailerFiledIsDis) returnif((this.currentIndex == 0 && this.carNumber.length >= 6) || (this.currentIndex == 2 && this.carNumber.length >= 6) || (this.currentIndex == 1 && this.carNumber.length >= 7)) {this.sureColor = true}if((this.currentIndex == 0 && this.carNumber.length >= 7) || (this.currentIndex == 2 && this.carNumber.length >= 7) || (this.currentIndex == 1 && this.carNumber.length >= 8)) returnthis.current++this.carNumber[this.current - 1] = val;},sure () {this.keyShow = falsethis.$forceUpdate()},backspace () {console.log(this.current, 'current')if (this.current <= 1) {this.provinceBoardShow = truethis.numberIsDis = truethis.englishIsDis = truethis.trailerFiledIsDis = truethis.$forceUpdate()}if (this.current <= 0) returnthis.current --this.carNumber.pop()this.$forceUpdate()},addCar () {if (this.sureColor == false) {this.$u.toast('请输入有效的车牌号')return false}console.log(this.carNumber, 'carn')}}}
</script><style lang="scss">
@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;
}.font-30 {font-size: 30rpx;
}.color-333 {color: #333333;
}
.container {.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;}.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: 42rpx;.car_type {display: flex;justify-content: start;margin: 0 auto;.default_car {width: 98rpx;height: 98rpx;border: 1rpx solid #999999;text-align: center;line-height: 98rpx;font-size: 40rpx;font-family: PingFang SC;font-weight: bold;color: #333333;.line {color: #EA4070;border-radius: 2px;animation: fade 1500ms infinite;    -webkit-animation: fade 1500ms infinite;}}.default_car:nth-child(1) {border-right: none;}.default_car:nth-child(2) {border-right: none;color: #EA4070;}.default_car:nth-child(3) {border-right: none;color: #EA4070;}.default_car:nth-child(4) {border-right: none;color: #EA4070;}.default_car:nth-child(5) {border-right: none;color: #EA4070;}.default_car:nth-child(6) {border-right: none;color: #EA4070;}.default_car:nth-child(7) {color: #EA4070;}.default_car:nth-child(8) {border-left: none;color: #EA4070;}}}.tips {font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;margin: 109rpx 0 30rpx 0;text-align: center;}.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: 450rpx;box-sizing: border-box;position: fixed;bottom: 0;left: 0;background-color: #D2D6D9;.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;background-color: #fff;}.province-keyboard {margin: 0 5rpx;flex-wrap: wrap;.td-nor {flex: 0 1 8%;// margin-right: 3px;}}.number-keyboard {margin: 0 5rpx;.td-num {flex: 0 1 8%;}.board-active {box-shadow: 0 0 0 #e5e5e5;background: #e5e5e5;}}.english-keyboard {margin: 0 5rpx;flex-wrap: wrap;&.englishtTwo {// margin-left: 80rpx;.td-num {margin-right: 5px;flex: 0 1 8%;}}.td-num {flex: 0 1 8%;}.board-active {box-shadow: 0 0 0 #e5e5e5;background: #e5e5e5;}}}.delete {width: 100rpx;height: 84rpx;text-align: center;background-color: #AFB2BC;border-radius: 8rpx;position: absolute;right: 120rpx;bottom: 30rpx;justify-content: center;align-items: center;}.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;}
}
</style>

http://www.ppmy.cn/news/935167.html

相关文章

抬杠: 有腔调的语音抬杠对话社区

抬杠: 有腔调的语音抬杠对话社区

抬杠 是一个专为手机用户量身定制的语音互动社区&#xff0c;采用独有的观点碰撞决断胜负机制引领社区话题。 抬杠 是一个专为手机用户量身定制的语音互动社区&#xff0c;采用独有的观点碰撞决断胜负机制引领社区话题。整个平台在操作上仅围绕语音对话这种操作&#xff0c;由用…
阅读更多...
怎么用计算机打出抬杠,怎么玩抬杠 比微信更有意思的抬杠使用教程 (全文)

怎么用计算机打出抬杠,怎么玩抬杠 比微信更有意思的抬杠使用教程 (全文)

智能手机网络的普及&#xff0c;让人们重新拾回语音聊天的乐趣&#xff0c;那么一个语音聊天社区意味着什么呢?《抬杠》语音交流社区的主题当然是抬杠&#xff0c;也就是辩论&#xff0c;在这里&#xff0c;软件搭建了一个观点擂台&#xff0c;让杠友们发表“杠题”摆擂台&…
阅读更多...
有一种高级的情商，叫“不抬杠”

有一种高级的情商，叫“不抬杠”

转自网络媒体发布 妙享心理 2023-05-26 22:12 发表于湖北 《甄嬛传》——一部教科书级别的宫斗大剧&#xff0c;我却在其中学到了至关重要的职场之道。 就拿开头选秀日那一幕来说&#xff1a; 安陵容不小心撞翻茶水&#xff0c;撒到夏冬春身上&#xff0c;夏冬春仗势欺人&…
阅读更多...
兄弟，抬杠吗？

兄弟，抬杠吗？

兄弟&#xff0c;抬杠吗&#xff1f; 当你和其他人争辩、争吵、音调偏高的时候&#xff0c; 就得考虑一下 我是不是在抬杠&#xff1f; 是的&#xff0c;没错&#xff0c;你就是在抬杠&#xff01;&#xff01;&#xff01; 为什么要杠呢&#xff1f; 无非是自己的观点、看法…
阅读更多...
升级 Android 目标版本到 31(S) 这么多坑

升级 Android 目标版本到 31(S) 这么多坑

1 背景 最近对我的应用做了一些小的改动&#xff0c;准备上架 Google Play. 本以为小事一桩&#xff0c;没想到要做非常多的改动。其中一个改动是谷歌要求 billing 库升级到 4.0 及以上版本。此外&#xff0c;另一个比较大的改动是要求升级目标版本到 31. 我之前从 29 升级到 …
阅读更多...
钉钉机器人消息MarkDown下发送带色消息兼容手机APP

钉钉机器人消息MarkDown下发送带色消息兼容手机APP

添加font标签, 设置颜色, 一定要使用\"包围色号, 否则手机不显示颜色, 不支持英文颜色如red, blue… 只支持pc变色 <font color#0000FF> Test Content </font>支持pc和app变色 <font color\"#0000FF\"> Test Content </font>
阅读更多...
手打 小份 kubernetes v1.27.3 集群

手打 小份 kubernetes v1.27.3 集群

文章目录 1. 准备2. yum3. 安装 ansible4. 互信5. hosts6. 关闭防火墙、swap、selinux7. 配置系统文件句柄数8. 启用ipvs9. 修改内核参数10. 安装 containerd11. 安装nerdctl12. kubernetes yum13. 部署 kubernetes13.1 安装工具13.2 初始化配置 14. 部署 master15. 部署 node1…
阅读更多...
Mybatis-动态SQL - 学员管理系统plus

Mybatis-动态SQL - 学员管理系统plus

动态SQL和lombok <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><
阅读更多...
最新文章

Copyright @ 2022~2023