uniapp vue2 车牌号输入组件记录

uniapp vue2 车牌号输入案例记录

组件如图

直接上代码

1.html

<template>
	<view>
		<view class="plate" :class="{'show': show}">
			<view class="itemFirst flex-d">
				<view class="item item1" @click="handleChange(0)">
					{{ plateNumber[0] || '' }}
				</view>
				<view class="item item1" @click="handleChange(1)">{{ plateNumber[1] }}</view>
			</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 class="newDot flex-c">新能源</view>
				<view class="" v-if="plateNumber[7]">
					<text>{{ plateNumber[7] }}</text>
				</view>
			</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>

2.js

<script>
	export default {
		name: "plate",
		props: {
			number: {
				type: Array,
				default: []
			}
		},
		watch: {
			number(newVal, oldVal) {
				this.plateNumber = newVal
			}
		},
		data() {
			return {
				show: false,
				plateNumber: this.number,
				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', '挂', '警', '学', '港', '澳',
				]
			}
		},

		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>

3.css

<style scoped lang='scss'>
	.new-energy {
		box-sizing: border-box;
		border: 2rpx dashed #03BE9F;
		font-weight: bold;
		height: 84rpx;
		background: red;
		width: 100%;
		position: relative;

		.newDot {
			width: 55rpx;
			height: 30rpx;
			border-radius: 50rpx;
			background: #03BE9F;
			font-size: 16rpx;
			color: #fff;
			position: absolute;
			top: -20rpx;
			left: 7rpx;
		}
	}

	.plate {
		display: flex;
		justify-content: space-between;

		.item {
			width: 70rpx;
			height: 84rpx;
			background-color: #F3F4F7;
			border-radius: 8rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.90);
			font-weight: bold;
			position: relative;

			/* margin 18rpx 0 .active {
				background-color: #bbbbbb;
			} */
		}

		.itemFirst {
			border-radius: 8rpx;
			padding: 18rpx 0;
			height: 84rpx;
			box-sizing: border-box;
			background-color: #F3F4F7;

			.item1 {
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 0;
			}

			.item:nth-child(1) {
				border-right: 2rpx solid #DFDFDF;
			}
		}

		.emptyNew {
			height: 54px;
			line-height: 30rpx;

			text {
				color: #03BE9F;
				font-size: 18rpx;
			}
		}

		.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: 80rpx;
				height: 84rpx;
				margin-right: 8rpx;
				margin-bottom: 8rpx;
				vertical-align: top;
				border-radius: 8rpx;

				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>

页面中使用

<plate :number="plateNumber" @myPlateChange="plateChange"></plate>

plateNumber: [] //string[]
// 获取车牌
plateChange(val) {
	console.log(val);
},