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

页面中使用

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

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