查询效果图

直接上代码：

<template><view class="query-vehicle"><!-- <page-navbar :is-slot="true" title="车辆查询"></page-navbar> --><view class="title">请输入查询的车牌号</view><!-- 车辆查询 --><view><view class="car" @click="bFocus = true"><input :focus="bFocus" type="text" v-model="sCar" disabled class="ipt-hide" :maxlength="cCarNum" /><view class="car-item" v-for="(nIndex, k) in cCarNum" :class="{active: k === sCar.length }":key="nIndex">{{sCar.split('')[k]?sCar.split('')[k].toUpperCase():''}}</view><view class="car-change" v-if="bIsUnit"><u-image width="50rpx" height="50rpx" :src="newEnergyPath" /><text>新能源</text></view></view><!-- 自定义键盘组件 --><keyboard-input @typeChange="typeChange" v-if="bFocus" :plate="sCar" @export="setPlate"@close="bFocus = false" /></view><submit-btn text="确认查询" @handleSubmit="handleSubmit" :isOpacity="isOpacity"></submit-btn></view>
</template>
<script>import KeyboardInput from '@/components/keyboard-input/keyboard-input.vue'export default {components: { KeyboardInput },mixins: [],data() {return {newEnergyPath: '/pages/home/static/new-energy.png',sCar: '', // 车牌号bIsUnit: true, // 是否新能源bFocus: false, // 输入车键盘触发queryRecord: []}},mounted() {},computed: {cCarNum() {return this.bIsUnit ? 7 : 8; //车牌位数（新能源8位）},isOpacity() {return this.sCar.length >= 7}},onShow() {},watch: {},methods: {// 车牌号完成触发setPlate(plate) {if (plate.length >= 7) this.sCar = plate;this.bFocus = false;},// 切换新能源触发typeChange(e) {// 2新能源if (Number(e) === 2) {this.bIsUnit = false} else {this.bIsUnit = true}this.sCar = ''},// 查询车辆信息parkingGet(sCarNumber) {uni.showLoading({title: '正在查询...',mask: true})this.$u.api.parkingGet({carLicense: sCarNumber}).then(res => {const {cardUuid} = res.dataif (cardUuid && cardUuid !== '' && cardUuid !== '0') {this.$u.route({url: 'pages/home/parkingFee/view/vehicleInformation',params: res.data})} else {uni.showToast({title: '未查询到停车记录',icon: 'none'})}}).catch(err => {throw err}).finally(() => {uni.hideLoading();})},handleSubmit() {if (this.sCar.length >= 7) {this.parkingGet(this.sCar)} else {uni.showToast({title: '请输入正确车牌号查询',icon: 'none'})}}}}
</script>
<style lang='scss'>.query-vehicle {padding: 60rpx 0;background: #FFFFFF;.title {padding: 0 30rpx 50rpx;font-size: 40rpx;font-weight: bold;color: #262626;}.car {display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 270rpx;width: 100%;box-sizing: border-box;.car-item {height: 106rpx;width: 72rpx;margin: 0 6rpx;text-align: center;line-height: 106rpx;color: #262626;font-size: 50rpx;border: 2rpx solid #D8D8D8;border-radius: 6rpx;}.active {border: 2rpx solid #0683FF;}.ipt-hide {position: absolute;z-index: -1;left: -100%;opacity: 0}.car-change {height: 106rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 20rpx;padding: 4rpx;margin: 0 6rpx;line-height: 2;color: #BBBBBB;border: 2rpx dotted #D8D8D8;border-radius: 6rpx;}}}
</style>

键盘组件部分：

自定义车键盘组件：keyboard-input.vue uni-plate-input.css uni-plate-input.less

新建三个文件夹同级：

keyboard-input.vue

<template><view class="so-mask"><view style="height: 100%" @tap="$emit('close')" /><view class="so-plate animation-scale-up"><view class="so-plate-head"><view class="so-plate-type"><radio-group @change="typeChange"><label><radio value="1" :checked="type===1" />普通车牌</label><label><radio value="2" :checked="type===2" />新能源车牌</label></radio-group></view></view><view class="so-plate-body"><view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch"data-index="0"><text>{{ currentInputValue[0] }}</text></view><view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch"data-index="1"><text>{{ currentInputValue[1] }}</text></view><view class="so-plate-dot"></view><view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch"data-index="2"><text>{{ currentInputValue[2] }}</text></view><view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch"data-index="3"><text>{{ currentInputValue[3] }}</text></view><view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch"data-index="4"><text>{{ currentInputValue[4] }}</text></view><view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch"data-index="5"><text>{{ currentInputValue[5] }}</text></view><view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch"data-index="6"><text>{{ currentInputValue[6] }}</text></view><view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch"v-if="type == 2" data-index="7"><text>{{ currentInputValue[7] }}</text></view></view><view class="so-plate-foot"><view class="so-plate-keyboard" :style="{height:keyboardHeight}"><view id="keyboard"><block v-if="inputType == 1"><view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el":data-value="el" @tap="chooseKey">{{ el }}</view></block><block v-if="inputType == 1"><text class="so-plate-key fill-block"></text></block><block v-if="inputType >= 3"><view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el":data-value="el" @tap="chooseKey">{{ el }}</view></block><block v-if="inputType >= 2"><view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el":data-value="el" @tap="chooseKey">{{ el }}</view></block><block v-if="inputType == 3"><text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text></block><block v-if="inputType == 4"><view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el":data-value="el" @tap="chooseKey">{{ el }}</view></block><text v-if="inputType == 4" class="so-plate-key fill-block"></text></view></view><view class="so-plate-btn-group"><view><button class="so-plate-btn so-plate-btn--cancel" @tap="$emit('close')">取消</button></view><view><button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">删除</button><button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button></view></view></view></view></view>
</template>
<script>export default {name: 'uni-plate-input',data() {return {type: 1, //车牌类型currentInputIndex: 0, //当前编辑的输入框currentInputValue: ['', '', '', '', '', '', ''],fillBlock: [{num: 11}, {num: 12}, {num: 13}, {num: 14}, {num: 15}, {num: 16}], //避免:key报错keyboardHeightInit: false,keyboardHeight: 'auto',provinceText: ['粤','京','冀','沪','津','晋','蒙','辽','吉','黑','苏','浙','皖','闽','赣','鲁','豫','鄂','湘','桂','琼','渝','川','贵','云','藏','陕','甘','青','宁','新'],numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U','V', 'W', 'X', 'Y', 'Z'],lastWordText: ['挂', '港', '学', '领', '警']};},props: {plate: {type: String}},computed: {//输入框类型inputType() {switch (this.currentInputIndex) {case 0:return 1;break;case 1:return 2;break;case 2:return 3;break;case 3:return 3;break;case 4:return 3;break;case 5:return 3;break;case 6:return this.type == 2 ? 3 : 4;break;case 7:return 4;break;default:return 1;break;}}},watch: {currentInputIndex: function(n, o) {if (!this.keyboardHeightInit) returnthis.$nextTick(() => {this.changeKeyboardHeight()})}},methods: {//车牌类型切换typeChange(e) {this.$emit("typeChange", e.detail.value);const {value} = e.detail;this.type = parseInt(value)this.currentInputIndex = 0if (value == 1) {this.currentInputValue = ['', '', '', '', '', '', '']} else {this.currentInputValue = ['', '', '', '', '', '', '', '']}},inputSwitch(e) {const {index} = e.currentTarget.dataset;this.currentInputIndex = parseInt(index);},chooseKey(e) {const {value} = e.currentTarget.dataset;this.$set(this.currentInputValue, this.currentInputIndex, value);if (this.type == 1 && this.currentInputIndex < 6) {this.currentInputIndex++}if (this.type == 2 && this.currentInputIndex < 7) {this.currentInputIndex++}},deleteKey() {this.$set(this.currentInputValue, this.currentInputIndex, '')if (this.currentInputIndex != 0) this.currentInputIndex--},exportPlate() {const plate = this.currentInputValue.join('')let err = falseif (this.type === 1 && plate.length != 7) {err = true} else if (this.type === 2 && plate.length != 8) {err = true}if (err) return uni.showToast({title: '请输入完整的车牌号码',icon: 'none'})this.$emit('export', plate)},changeKeyboardHeight() {const that = thisconst query = uni.createSelectorQuery().in(this);query.select('#keyboard').boundingClientRect();query.exec(function(res) {if (res && res[0]) {that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'that.keyboardHeightInit = true}});}},mounted() {// console.log(this.plate);const plateKey = this.plate.split('')if (plateKey.length === 7) {this.type = 1} else if (plateKey.length === 8) {this.type = 2}if (plateKey.length === 7 || plateKey.length === 8) {this.currentInputValue = plateKeythis.currentInputIndex = plateKey.length - 1}setTimeout(() => { //在动画结束之后才开始获取this.$nextTick(() => {this.changeKeyboardHeight()})}, 500);}};
</script>
<style scoped lang="less">@import './uni-plate-input';
</style>

关于uni-plate-input.css部分：

.so-mask {position: fixed;top: 0;bottom: 0;right: 0;left: 0;background: rgba(0, 0, 0, 0.5);z-index: 998
}.so-plate {box-sizing: border-box;position: absolute;bottom: 0;width: 100%;left: 0;background: #fff;padding: 25upx 25upx 0 25upx
}.so-plate-head {display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;-webkit-box-align: center;align-items: center
}.so-plate-type {-webkit-box-flex: 1;flex: 1;display: block
}.so-plate-type label {display: inline-block;min-height: 32upx;font-size: 26upx;margin-right: 20upx
}.so-plate-body {box-sizing: border-box;padding: 30upx 0;display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;-webkit-box-align: center;align-items: center
}.so-plate-word {border: 1upx solid #ccc;border-radius: 10upx;height: 0;margin: 0 5upx;box-sizing: border-box;padding-bottom: calc(4.28571429%);width: calc(4.28571429%);position: relative
}.so-plate-word.active {border-color: #007aff;box-shadow: 0 0 15upx 0 #007aff
}.so-plate-word text {position: absolute;top: 50%;left: 50%;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);font-weight: 700;font-size: 32upx
}.so-plate-dot {width: 15upx;height: 15upx;background: #ccc;border-radius: 50%;margin: 0 5upx
}.so-plate-keyboard {background: #eee;margin-left: -25upx;margin-right: -25upx;padding: 20upx 25upx 10upx 25upx;box-sizing: border-box;-webkit-transition: all .3s;transition: all .3s
}.so-plate-keyboard>view {display: -webkit-box;display: flex;flex-wrap: wrap;-webkit-box-pack: justify;justify-content: space-between
}.so-plate-key {display: block;background: #fff;border-radius: 10upx;box-shadow: 0 0 8upx 0 #bbb;width: 80upx;height: 80upx;margin: 5upx 0;font-size: 32upx;text-align: center;display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;position: relative
}.so-plate-key.hover {background: #efefef
}.so-plate-key.fill-block {width: 80upx;height: 80upx;background: none;box-shadow: none
}.so-plate-btn {display: inline-block;background: #fff;border-radius: 10upx;box-shadow: 0 0 10upx 0 #bbb;font-size: 28upx;text-align: center;margin: 0 0 0 10upx
}.so-plate-btn-group {display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;background: #eee;margin-left: -25upx;margin-right: -25upx;box-sizing: border-box;padding: 0 25upx 10upx 25upx
}.so-plate-btn--cancel {margin: 0
}.so-plate-btn--submit {background: #5773f9;color: #fff
}.so-plate-btn--delete {color: #fd6b6d
}.animation-scale-up {-webkit-animation-duration: .2s;animation-duration: .2s;-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scale-up;animation-name: scale-up
}@-webkit-keyframes scale-up {0% {opacity: .8;-webkit-transform: scale(.8);transform: scale(.8)}100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1)}
}@keyframes scale-up {0% {opacity: .8;-webkit-transform: scale(.8);transform: scale(.8)}100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1)}
}

关于uni-plate-input.less部分：

.so-mask {position: fixed;top: 0;bottom: 0;right: 0;left: 0;background: rgba(0, 0, 0, 0.5);z-index: 998;
}
.so-plate {box-sizing: border-box;position: absolute;bottom: 0;width: 100%;left: 0;background: #fff;padding: 25upx 25upx 0 25upx;&-head {display: flex;justify-content: space-between;align-items: center;}&-type {         flex:1;display:block;label {display: inline-block;min-height: 32upx;font-size: 26upx;margin-right: 10upx;}}&-body {box-sizing: border-box;padding: 30upx 0;display: flex;justify-content: space-between;align-items: center;}&-word {border: 1upx solid #ccc;border-radius: 10upx;height: 0;margin: 0 5upx;box-sizing: border-box;padding-bottom: calc((100% - 70upx) / 7);width: calc((100% - 70upx) / 7);position: relative;&.active {border-color: #007aff;box-shadow: 0 0 15upx 0 #007aff;}text {position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);font-weight: 700;font-size: 32upx;}}&-dot {width: 15upx;height: 15upx;background: #ccc;border-radius: 50%;margin: 0 5upx;}&-keyboard {background: #eee;margin-left: -25upx;margin-right: -25upx;padding: 20upx 25upx 10upx 25upx;box-sizing: border-box;transition: all .3s;&>view{display: flex;flex-wrap: wrap;justify-content: space-between;}}&-key {display: block;background: #fff;border-radius: 10upx;box-shadow: 0 0 8upx 0 #bbb;width: 80upx;height: 80upx;margin: 5upx 0;font-size: 32upx;text-align: center;display: flex;align-items: center;justify-content: center;position: relative;&.hover {background: #efefef;}&.fill-block {width: 80upx;height: 80upx;background: none;box-shadow: none;}}&-btn {display: inline-block;background: #fff;border-radius: 10upx;box-shadow: 0 0 10upx 0 #bbb;font-size: 28upx;text-align: center;margin:0 0 0 10upx;padding:0 25upx;&-group{display: flex;justify-content: space-between;background: #eee;margin-left: -25upx;margin-right: -25upx;box-sizing: border-box;padding: 0 25upx 10upx 25upx;}&--cancel{margin:0;}&--submit{background:#5773f9;color:#fff;}&--delete{color:#fd6b6d;}}
}.animation-scale-up {animation-duration: .2s;animation-timing-function: ease-out;animation-fill-mode: both;animation-name: scale-up
}
@keyframes scale-up {0% {opacity: .8;transform: scale(.8)}100% {opacity: 1;transform: scale(1)}
}

三个文件目录结构：

按照上面所写就完成了自定义车牌号键盘输入了，喜欢点个赞点个关注

uniapp自定义车牌号查询输入框相关推荐

uniapp - 实现车牌号键盘与格子间隔显示组件，汽车牌照录入支持自定义样式、新能源等（附带组件完整源码，开箱即用，稍微改改就能用）
效果图 uniapp 全平台兼容,车牌号键盘输入.分格显示功能示例源码,注释很多! 可以直接复制一下,然后自己改改样式或功能就能使了. 示例源码复制,运行. &
微信小程序自定义车牌号输入键盘-附源码
键盘已做过处理第一位只能是省份简称,第二位只能输入字母,第三位以后可以输入数字加字母的组合,输入完成后有正则方法校验车牌号的合法性.高效率车牌号输入键盘,大大提升用户体验,增强用户输入车牌号的真实性 ...
微信小程序 - 实现车牌输入功能，自定义车牌号输入法组件（键盘弹出后输入车牌号，可自定义各地区及界面样式）超详细注释组件插件示例源码
效果图本文实现了输入车牌号码专用键盘组件,高效简洁无 BUG, 你可以直接复制组件源码,干净整洁的代码轻松移植到自己的项目中. 如下图所示,本文提供这样一个组件供你复制,快速完成功能. 组件源码 ...
通过自定义android键盘实现车牌号输入法
前言很多的移动应用中经常需要限定用户输入特定的字符,比如吱妇保,微信钱包等在输入支付密码的时候就是直接调出的纯数字键盘并且不允许用户切换为非数字键盘,这在一定程度上方便了前端数据校验同时也有很好的用 ...
微信公众平台功能大杂烩 - ip/域名查询车牌号归属地查询手机归属地查询公交查询英汉互译...
我看到有些公众平台比如:海南大学功能非常丰富,包含四六级成绩查询.自习室空位查询.小i机器人.天气查询.快递查询.笑话.火车查询.人品计算... 我实现了海南大学微信公众平台的部分功能,再根据自己需 ...
vue 停车场车牌号键盘微信支付
应公司要求现在需做某医院的停车厂微信公众号支付功能前端框架 Vant https://youzan.github.io/vant/#/zh-CN/intro 预览demo:http://tangyu ...
如何能用架子号查到车牌号怎么用车架号查找车牌号通过车架号能查车牌号知道车架号怎么查车牌号
通过车架号能查车牌号,用车架号查找车牌号,知道车牌号查询车架号,以及知道车架号来查询车牌号都是可以的. 这些信息都是在车管所有登记的,所以知道一个的信息来反查另外一个的信息都是可以的.因为这些数据都是 ...
【趣味编程】从英语词典里找出有趣的车牌号
以前在大街上看到一些有趣的车牌号,由于国家规定燃油车的车牌号没有字母I和O,用数字1.0代替,这样看来有些车牌号像个英语单词,我萌生出一个想法:从英语词典里找出符合车牌号命名规则的单词,看看有哪些更有 ...
android 自定义键盘_Android自定义输入车牌号键盘、车牌简称，数字，字母键盘...
本文来自阿钟的投稿,全文阅读大约十分钟为了便于用户快捷的输入车牌号码便需要自定义个车牌键盘,而不是使用系统的键盘输入,上效果图: 横屏效果图片竖屏效果图片一.首先我们要来分析一下需要做哪些东 ...
Edittext不可编辑可点击，输入密码可见与不可见，验证码换格输入实现方法，车牌号自定义输入键盘
不可编辑可点击:设置两个属性即可 mEdittext.setFocusable(false); mEdittext.setOnClickListener(this::onClick); 输入密码可见与 ...

uniapp自定义车牌号查询输入框

键盘组件部分：

按照上面所写就完成了自定义车牌号键盘输入了，喜欢点个赞点个关注

uniapp自定义车牌号查询输入框相关推荐

最新文章

热门文章