移动端车牌号键盘组件

记录下小组件，方便日后用到
template

<template>
	<view class="main">
		<view class="title">
			<view class="nav" @click="cancel">取消</view>
			{{BrandNumber}}
			<view class="nav" @click="confirm">确认</view>
		</view>
		<view class="keyboard">
			<!-- 省份 -->
			<view class="text-center" v-for="(item, index) in btnlist_city" :key="index">
				<view class="keys" @click="keyTap(item.name, true)">{{item.name}}</view>
			</view>
			<!-- 车牌号 -->
			<view class="text-center" v-for="(item, index) in btnlist_code" :key="index">
				<view class="keys" :style="!item.IsClick ? 'background-color:#eee' : ''" @click="keyTap(item.name,item.IsClick)">
					{{item.name}}
				</view>
			</view>
			<!-- 删除 -->
			<view class="text-center" style="width:145upx;">
				<view class="keys" @click="keyTap('x')" style="width:145upx;">
					<image style="width:18px;height:18px;margin-top:20upx;" src="http://image.edsoft.cn/clearbutton.png" />
				</view>
			</view>
		</view>
	</view>
</template>

js：

<script>
import CarCode from './carcode.js'
export default {
	props: {
		value: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			btnlist_city: [],
			btnlist_code: [],
			BrandNumber: ''
		};
	},
  	created() {
		this.btnlist_city = CarCode.city
		if (this.value) {
			this.BrandNumber = this.value
			this.getData('code')
		}
	},
	methods: {
		keyTap(keys, isclick) {
			let len = this.BrandNumber.length
			switch (keys) {
				case 'x':
					if (len === 0) return
					this.BrandNumber = this.BrandNumber.substr(0, len - 1)
					this.getData('city')
					break
				default:
					if (len === 7 || !isclick) return
					this.BrandNumber += keys
					this.getData('code')
					break
			}
		},
		getData(type) {
			let len = this.BrandNumber.length
			// 省简称
			if (type == 'city') {
				if (len == 1) {
					let CarCodeArr = CarCode.code
					CarCodeArr.forEach(item => {
						let text = /^[0-9]+.?[0-9]*$/.test(item.name)
						// 验证除数字外，都可以点击
						item.IsClick = !text
					})
					this.btnlist_city = []
					this.btnlist_code = CarCodeArr
				}
				if (len == 0) {
					this.btnlist_city = CarCode.city
					this.btnlist_code = []
				}
			}
			// 号牌
			if (type == 'code') {
				let CarCodeArr = CarCode.code
				// 数组重组
				if (len == 2) {
					CarCodeArr.forEach(item => {
						item.IsClick = true
					})
				}
				this.btnlist_city = []
				this.btnlist_code = CarCodeArr
			}
		},
		cancel() {
			this.BrandNumber = ''
			this.DataList('city')
			this.$emit('carChange', '')
		},
		confirm() {
			this.$emit('carChange', this.BrandNumber)
		}
	}
}
</script>

css：

<style lang="scss" scoped>
.main {
	position: fixed;
	bottom: 0;
	height: auto;
	width: 100%;
	background: #F5F5F5;
	z-index: 1;

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx 20upx;

		.nav {
			font-size: 30upx;
			color: #389FFE;
		}
	}

	.keyboard {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.text-center {
			width: 70upx;

			.keys {
				width: 60upx;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				margin-bottom: 10upx;
				border-radius: 5px;
				background-color: #fff;
				border: 1px solid #eee;
				padding: 0;
				font-size: 30upx;
			}
		}
	}
}
</style>

carcode.js文件

const city = [
   {
      id: 0,
      name: '京'
   },
   {
      id: 1,
      name: '津'
   },
   {
      id: 2,
      name: '翼'
   },
   {
      id: 3,
      name: '晋'
   },
   {
      id: 4,
      name: '蒙'
   },
   {
      id: 5,
      name: '辽'
   },
   {
      id: 6,
      name: '吉'
   },
   {
      id: 7,
      name: '鲁'
   },
   {
      id: 8,
      name: '豫'
   },
   {
      id: 9,
      name: '粤'
   },
   {
      id: 10,
      name: '黑'
   },
   {
      id: 11,
      name: '沪'
   },
   {
      id: 12,
      name: '苏'
   },
   {
      id: 13,
      name: '浙'
   },
   {
      id: 14,
      name: '皖'
   },
   {
      id: 15,
      name: '闽'
   },
   {
      id: 16,
      name: '赣'
   },
   {
      id: 17,
      name: '鄂'
   },
   {
      id: 18,
      name: '湘'
   },
   {
      id: 19,
      name: '桂'
   },
   {
      id: 20,
      name: '渝',
   },
   {
      id: 21,
      name: '川'
   },
   {
      id: 22,
      name: '贵'
   },
   {
      id: 23,
      name: '云'
   },
   {
      id: 24,
      name: '藏'
   },
   {
      id: 25,
      name: '陕'
   },
   {
      id: 26,
      name: '甘'
   },
   {
      id: 27,
      name: '琼'
   },
   {
      id: 28,
      name: '青'
   },
   {
      id: 29,
      name: '宁'
   },
   {
      id: 30,
      name: '新'
   },
   {
      id: 31,
      name: '使',
   },
   {
      id: 32,
      name: '领'
   },
   {
      id: 33,
      name: '警'
   },
   {
      id: 34,
      name: '学'
   },
   {
      id: 35,
      name: '港'
   },
   {
      id: 36,
      name: '澳'
   },
   {
      id: 37,
      name: '台'
   }
]
const code = [
   {
      id: 0,
      name: '0',
      IsClick: false
   },
   {
      id: 1,
      name: '1',
      IsClick: false
   },
   {
      id: 2,
      name: '2',
      IsClick: false
   },
   {
      id: 3,
      name: '3',
      IsClick: false
   },
   {
      id: 4,
      name: '4',
      IsClick: false
   },
   {
      id: 5,
      name: '5',
      IsClick: false
   },
   {
      id: 6,
      name: '6',
      IsClick: false
   },
   {
      id: 7,
      name: '7',
      IsClick: false
   },
   {
      id: 8,
      name: '8',
      IsClick: false
   },
   {
      id: 9,
      name: '9',
      IsClick: false
   },
   {
      id: 10,
      name: 'A',
      IsClick: true
   },
   {
      id: 11,
      name: 'B',
      IsClick: true
   },
   {
      id: 12,
      name: 'C',
      IsClick: true
   },
   {
      id: 13,
      name: 'D',
      IsClick: true
   },
   {
      id: 14,
      name: 'E',
      IsClick: true
   },
   {
      id: 15,
      name: 'F',
      IsClick: true
   },
   {
      id: 16,
      name: 'G',
      IsClick: true
   },
   {
      id: 17,
      name: 'H',
      IsClick: true
   },
   {
      id: 18,
      name: 'J',
      IsClick: true
   },
   {
      id: 19,
      name: 'K',
      IsClick: true
   },
   {
      id: 20,
      name: 'L',
      IsClick: true
   },
   {
      id: 21,
      name: 'M',
      IsClick: true
   },
   {
      id: 22,
      name: 'N',
      IsClick: true
   },
   {
      id: 23,
      name: 'O',
      IsClick: true
   },
   {
      id: 24,
      name: 'P',
      IsClick: true
   },
   {
      id: 25,
      name: 'Q',
      IsClick: true
   },
   {
      id: 26,
      name: 'R',
      IsClick: true
   },
   {
      id: 27,
      name: 'S',
      IsClick: true
   },
   {
      id: 28,
      name: 'T',
      IsClick: true
   },
   {
      id: 29,
      name: 'U',
      IsClick: true
   },
   {
      id: 30,
      name: 'V',
      IsClick: true
   },
   {
      id: 31,
      name: 'W',
      IsClick: true
   },
   {
      id: 32,
      name: 'X',
      IsClick: true
   },
   {
      id: 33,
      name: 'Y',
      IsClick: true
   },
   {
      id: 34,
      name: 'Z',
      IsClick: true
   }
]
module.exports = {
   city,
   code
}

总结一下