uni-app 车牌录入组件封装（支持新能源）

1、组件截图

点击输入框调起【快速车牌输入面板】，点击不同类型的输入框调起4种类型的输入面板，点击任意输入框，光标跟随展示；当前输入框填入数值后，系统自动切换光标并唤醒下一输入框；默认只输入7位数值，第八位用来记录新能源车牌和挂车标识。

类型A：调起【汉字输入面板】；
类型B：调起【号码输入面板】，数字禁用；
类型C：调起【号码输入面板】，汉字禁用；
类型D：调起【号码输入面板】，数字/英文/汉字输入都可用。

汉字输入面板号码输入面板

2、完整代码

（1）车牌录入组件 plate.vue

<template><view><view class="plate" :class="{'show': show}"><view class="item" :class="{'active': index === 0}" @click="handleChange(0)">{{ plateNumber[0] }}<text class="triangle"></text></view><view class="item" :class="{'active': index === 1}" @click="handleChange(1)">{{ plateNumber[1] }}</view><view class="point">●</view><view class="item" :class="{'active': index === 2}" @click="handleChange(2)">{{ plateNumber[2] }}</view><view class="item" :class="{'active': index === 3}" @click="handleChange(3)">{{ plateNumber[3] }}</view><view class="item" :class="{'active': index === 4}" @click="handleChange(4)">{{ plateNumber[4] }}</view><view class="item" :class="{'active': index === 5}" @click="handleChange(5)">{{ plateNumber[5] }}</view><view class="item" :class="{'active': index === 6}" @click="handleChange(6)">{{ plateNumber[6] }}</view><view class="item new-energy" :class="{'active': index === 7}" @click="handleChange(7)"><view v-if="plateNumber[7] || plateNumber[7] === 0"><text>{{ plateNumber[7] }}</text></view><uni-icons type="plusempty" size="13" color="#03BE9F" v-else></uni-icons></view></view><section class="panel" :class="{'show': show}"><view class="header"><view @click="handleReset">重置</view><view @click="show = false">完成</view></view><view class="panelList"><view class="item" v-for="(item, idx) of currentDatas" :key="idx"><view :class="{'disabled': (index == 1 && idx < 10) || (index > 1 && index < 6 && idx > 33) }"v-if="item !==''" @click="handleClickKeyBoard(item, idx)">{{ item }}</view></view><view class="item backspace" :class="{'special': index === 0 }" @click="handleDelete">×</view></view></section></view>
</template>
<script>export default {name: "plate",data() {return {show: false,index: -1,areaDatas: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏','浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼','川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', '藏', '使', '领', '', '', '', '', '', ''],characterDatas: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '挂', '警', '学','港', '澳',  ]}},props: {plateNumber: {type: Array,default: Array.from({length: 8}, v => '')}},computed: {currentDatas() {return this.index === 0 ? this.areaDatas : this.characterDatas;}},methods: {handleChange(index) {this.index = index;this.show = true;},handleClickKeyBoard(item, idx) {if((this.index === 1 && idx < 10) || (this.index > 1 && this.index < 6 && idx > 33)) {return;}if (this.index < 8) {this.$set(this.plateNumber, this.index, item);this.$emit("myPlateChange", this.plateNumber);}if (this.index < 7) {this.index++;}},// 重置handleReset() {this.index = 0;for(let i = 0; i < 8; i++) {this.$set(this.plateNumber, i, '');}this.$emit("myPlateChange", this.plateNumber);},// 删除handleDelete() {this.$set(this.plateNumber, this.index, '');this.$emit("myPlateChange", this.plateNumber);if(this.index > 0) {this.index--;}}}}
</script>
<style scoped lang='less'>.plate {display: flex;justify-content: space-between;.item {width: 64rpx;height: 80rpx;background-color: #F3F4F7;border-radius: 8rpx;text-align: center;line-height: 80rpx;font-size: 32rpx;color: rgba(0,0,0,0.90);font-weight: bold;position: relative;&.active {background-color: #bbbbbb;}}.new-energy {box-sizing: border-box;border: 2rpx dashed #03BE9F;font-weight: bold;uni-icons {display: flex;align-items: center;justify-content: center;}}.point {height: 80rpx;text-align: center;line-height: 80rpx;color: #BDC4CC;font-size: 18rpx;}.triangle {width: 0;height: 0;border: 6rpx solid transparent;border-right-color: #00C69D;border-bottom-color: #00C69D;border-radius: 1rpx 2rpx 1rpx;position: absolute;right: 6rpx;bottom: 6rpx;}}.panel {position: fixed;left: 0;width: 100%;bottom: 0;z-index: 999;box-sizing: border-box;background-color: #F5F5F5;transition: all 0.3s ease;transform: translateY(100%);&.show {transform: translateX(0);}.header {display: flex;align-items: center;justify-content: space-between;padding: 0 24rpx;height: 96rpx;color: #2080F7;font-size: 34rpx;}.panelList {padding: 0 19rpx 20rpx;.item {display: inline-block;width: calc(~"(100% - 72rpx) / 10");height: 84rpx;margin-right: 8rpx;margin-bottom: 8rpx;vertical-align: top;view {width: 100%;height: 84rpx;line-height: 84rpx;border-radius: 6rpx;background: #FEFFFE;font-size: 32rpx;color: rgba(0,0,0,0.90);font-weight: bold;text-align: center;&.disabled {background-color: rgba(254, 255, 254, 0.6);color: rgba(0, 0, 0, 0.23);}}&:nth-of-type(10n) {margin-right: 0;}}.backspace {vertical-align: top;font-size: 48rpx;font-weight: bold;text-align: center;height: 84rpx;line-height: 84rpx;border-radius: 6rpx;background: #FEFFFE;color: rgba(0,0,0,0.90);}}}
</style>

（2）调用plate.vue

<template><view class="container"><view class="car"><view class="title">车牌号码<text class="icon">*</text></view><Plate :plateNumber="plateNumber" @myPlateChange="plateChange" /><button class="submit" @click="handleSave">保存</button></view></view>
</template>
<script>import Plate from './components/plate.vue'export default {name: 'car',data() {return {plateNumber: ['', '', '', '', '', '', '', '']}},components: {Plate},methods: {plateChange(val) {this.plateNumber = val;},// 保存handleSave() {let plate = "";this.plateNumber.forEach((item, index) => {if(index === 1) {plate = plate + item + "·";} else {plate += item;}})console.log(plate);}}}
</script>
<style lang="less" scoped>.car {width: calc(~"100% - 60rpx");height: 376rpx;margin: 16rpx auto;background-color: #FFFFFF;box-shadow: 0 4rpx 20rpx 0 rgba(101,108,106,0.1);border-radius: 16rpx;padding: 0 32rpx;box-sizing: border-box;position: relative;.title {height: 104rpx;line-height: 104rpx;font-family: PingFangSC-Regular;font-size: 28rpx;color: rgba(0,0,0,0.90);.icon {font-size: 32rpx;color: #FA3239;vertical-align: middle;margin-left: 4rpx;}}.submit {width: calc(~"100% - 64rpx");height: 96rpx;line-height: 96rpx;background: #02BA94;border-radius: 16rpx;color: #FFFFFF;font-size: 34rpx;margin-top: 48rpx;bottom: 48rpx;position: absolute;}}
</style>

uni-app 车牌录入组件封装（支持新能源）相关推荐

uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
web 机动车车牌录入组件
1. html 使用的是element ,from 因为我使用的是多个车牌录入,所以是双重循环,单个可以把index 相关的删掉 <el-form-item label="车牌号码 ...
uni app 调用网络打印机_uni-app封装一个request请求
在上一篇文章里面,写到使用uni.request请求的方法https://www.jianshu.com/p/bc62c9e1beed getList() { uni.request({url: &q ...
uni app 自定义头部组件（2）局部右侧按钮
上一篇为完全的自定义头部链接:https://blog.csdn.net/qq_37403179/article/details/102955419 本片则是使用uniapp已有的自定义方法给头部添 ...
好用app开屏广告组件XHLaunchAd -支持静态/动态图片广告/mp4视频广告
特性: 1.支持静态/动态图片广告. 2.支持mp4视频广告. 3.支持全屏/半屏广告. 4.支持网络及本地资源. 5.兼容iPhone和iPad. 6.支持广告点击事件. 7.支持自定义跳过按钮,添 ...
号牌号码识别，支持新能源车牌，离线识别，喜欢就收下吧
号牌号码识别,支持新能源车牌,离线识别我的项目地址: https://github.com/ccc920123/LicensePlateDemo 如果喜欢记得标星哟!!! 号牌识别,支持新能源车,离 ...
android 车牌键盘，支持新能源，警车，军车，领事馆车，特种车辆（源代码）
最近在android项目中,遇到需要android车牌键盘的需求(需要支持普通车牌,新能源,警车,军车,领事馆车,教练车以及特种车辆等车牌) 一.示例图话不多说,分享一下android车牌键盘效果图 ...
封装的H5 app无法使用van-uploader组件上传图片
vant的组件van-uploader上传图片在vue做H5时候是没有问题的,就是说直接在浏览器上是可以的但是一旦封装成客户端android和ios的时候直接就失效了今天我把自己写的一个组件分享给 ...
uni-app - 日历选择器组件（支持日期 “范围选择“ 多选 / 支持单选日期 / 自定义默认选中时间 / 弹框式 / 支持农历）完美兼容 H5 APP 小程序，最好用的教程完整源代码插件！
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,本文代码干净整洁注释详细. 本文提供弹框式日历选择器组件,支持单选.范围选择日期,全端兼容无BUG! 您只需复制粘贴,保证几 ...

uni-app 车牌录入组件封装（支持新能源）

1、组件截图

2、完整代码

uni-app 车牌录入组件封装（支持新能源）相关推荐

最新文章

热门文章