uniapp 实现车牌号录入

一、车牌输入组件页面

<template>
	<view>
			<view class="plate">
				<view style="position: relative" :class="['item',{active:index===0}]" @click.stop="handleChange(0)">
					{{plate[0]}}
				</view>
				<view style="position: relative" :class="['item',{active:index===1}]" @click.stop="handleChange(1)">
					{{plate[1]}}
				</view>
				<view class="point"></view>
				<view style="position: relative" :class="['item',{active:index===2}]" @click.stop="handleChange(2)">
					{{plate[2]}}
				</view>
				<view style="position: relative" :class="['item',{active:index===3}]" @click.stop="handleChange(3)">
					{{plate[3]}}
				</view>
				<view style="position: relative" :class="['item',{active:index===4}]" @click.stop="handleChange(4)">
					{{plate[4]}}
				</view>
				<view style="position: relative" :class="['item',{active:index===5}]" @click.stop="handleChange(5)">
					{{plate[5]}}
				</view>
				<view style="position: relative" :class="['item',{active:index===6}]" @click.stop="handleChange(6)">
					{{plate[6]}}
				</view>
				<view style="position: relative" :class="['item column',{active:index===7}]" @click.stop="handleChange(7)">
					<template v-if="newEnergy">
						<text>{{plate[7]}}</text>
					</template>
					<template v-else>
						<view class="c-pa" style="background-color: #eef3ff;width: 100%;height: 100%;">
							<image class="c-pa" style="width: 32rpx;height: 38rpx;right: 10rpx;bottom: 12rpx;" src="../../static/images/park/energyIcon.png" mode=""></image>
						</view>
					</template>
				</view>
		</view>
		
		<section class="panel" :class="{show:show}">
			<view class="header">
				<view class="p24" @click.stop="panelReset">重置</view>
				<!-- <img src="/static/down.png" style="width: 140rpx;" mode="widthFix" @click="panelHide" /> -->
				<view class="p24" @click.stop="panelHide">关闭</view>
			</view>
			<view class="panelList clearfix">
				<view class="item flex-justify-center flex-align-center" v-for="(item,index) of currentDatas" @click.stop="clickKeyBoard(item)" :key='index'>
					<text>{{item}}</text>
				</view>
			</view>
			<view class="backspace shadow" @click.stop="backspace">
				<text>删</text>
			</view>
		</section>
	</view>
</template>
 
<script>
	export default {
		name: "index",
		props: {
			characterDatas: {
				type: Array,
				default () {
					return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q',
						'R',
						'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '港', '澳', '学', '领','挂'
					]
				}
			},
			areaDatas: {
				type: Array,
				default () {
					return ['京', '沪', '粤', '津', '冀', '晋', '蒙', '黑', '吉', '辽', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '桂',
						'琼', '渝', '川', '贵', '云', '藏',
						'陕', '甘', '青', '宁', '新', '临', '领', '警', '学', '港', '澳'
					]
				}
			},
			defaultPlate:{
				type:Array,
				default () {
					return Array.from({
					length: 8
				}, v => '')
				}
			},
			plateType:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				show: false,
				index: -1,
				newEnergy: false,
				plate: this.defaultPlate
			}
		},
		created() {
		},
		computed: {
			currentDatas() {
				return this.index === 0 ? this.areaDatas : this.characterDatas;
			}
		},
		watch: {
			defaultPlate(newV){
				this.plate=newV
				console.log(newV,'newVnewV')
			},
			
			
			plate(value) {
				this.$emit("listenPlateChange",value);
			},
			plateType:{
				handler(value){
					if(value !== 3){
						this.newEnergy = false;
						this.$set(this.plate, 7, '');
						if(this.index === 7){
							this.index = 0
						}
					}else{
						this. newEnergy = true;
					}
				},
				deep:true
			}
		},
		methods: {
			panelShow() {
				this.show = true;
			},
			panelHide() {
				this.show = false;
			},
			handleChange(index) {
				if (index === 7) {
					if(this.plateType == 3){
						this.newEnergy = true;
						this.panelShow();
						this.index = index;
					}
				}else{
					this.panelShow();
					this.index = index;
				}
			},
			clickKeyBoard(item) {
				if (this.index < 7 || this.newEnergy) {
					this.$set(this.plate, this.index, item);
				}
 
				if(this.index < 6 || (this.plateType === 3 && this.index < 7)){
					this.index++;
				}
			},
			backspace() {
				if (this.index > 0) {
					if(this.index==7){
						this.newEnergy = false;
					}
					if(this.plateType === 3){
						this.newEnergy = true;
					}
					this.$set(this.plate, this.index, '');
					this.index--;
				}
			},
			panelReset() {
				this.index = 0;
				this.plate = Array.from({
					length: 8
				}, v => '');
			},
		}
	}
</script>
 
<style scoped lang='scss'>
 
	.plate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		&>view:first-child{
			width: 104rpx;
			height: 104rpx;
		}
		.item {
			width: 68rpx;
			height: 104rpx;
			background-color: #f5f5f5;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			line-height: 104rpx;
			justify-content: center;
			color: #000;
			font-size: 36rpx;
			font-weight: 500;
			&.column {
				flex-direction: column;
			}
 
			&.active {
				border: 3rpx solid #3686FF;
			}
		}
	}
.point{
	width: 12rpx;
	height: 24rpx;
	border-radius: 6rpx;
	background: #3686FF;
}
	.panel {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		z-index: 999;
		margin-bottom: 10rpx;
		box-sizing: border-box;
		background-color: #cfd0d5;
		transition: all 0.3s ease;
		transform: translateY(100%);
 
		.p24 {
			padding: 24rpx;
		}
 
		&.show {
			transform: translateX(0);
		}
 
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			border-top: 1px solid #c9cacd;
			border-bottom: 1px solid #c9cacd;
		}
 
		.panelList {
			padding-top: 20rpx;
			padding-left: 16rpx;
			text-align: center;
 
			.item {
				float: left;
				width: 62rpx;
				height: 84rpx;
				background: #fff;
				border-radius: 10rpx;
				line-height: 84rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				box-shadow: 0 0 8px 1px #e5e5e5;
				position: relative;
 
			}
		}
 
		.backspace {
			position: absolute;
			bottom: 10rpx;
			right: 22rpx;
			width: 62rpx;
			height: 84rpx;
			background-color: #adb2bc;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.icon {
		width:10rpx;height:10rpx;position: absolute;bottom: 8rpx;right: 8rpx;
	}
	.clearfix::before,
	.clearfix::after {
		content: ' ';
		display: table;
		height: 0;
		line-height: 0;
		visibility: hidden;
		clear: both;
	}
</style>

二、在需要使用的页面引入使用

<template>
  <car-plate-edit @listenPlateChange="listenPlateChange" :plateType="3" :defaultPlate='plateNumber'></car-plate-edit>
</template>
 
<script>
import carPlateEdit from '@/components/car-plate-edit/index.vue'
   	export default {
         components: {
			carPlateEdit
		},
       data() {
			return {
                     plateNumber: ['', '', '', '', '', '', ''], //需要设置的默认车牌
                     plate: '', //输入的车牌
                   }
              }
 
        methods: {
            		
			//获取车牌信息
			listenPlateChange(value) {
				this.plate = value.join('')
			},
 
        }
  }
</script>

效果：