?查詢效果圖

?直接上代碼：

<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自定义车牌号查询输入框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。