自定义的车牌号键盘组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了自定义的车牌号键盘组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。
自定义的车牌号键盘组件,# vue,vue.js,javascript,css3 文章来源地址https://www.toymoban.com/news/detail-528358.html
<template>
	<view class="keyboard-wrap" v-if="kbShow">
		<view class="head">
			<view class="done" @tap="done">
				<text class="iconfont iconxiala-"></text>关闭
			</view>
		</view>

		<view class="key-list">
			<view class="colspan" :class="{'active' : index === currentIndex }" v-for="(item, index) in keyboardList"
				:key="index">
				<view class="uni-flex" v-for="(secondItem, secondIndex) in item" :key="secondIndex">
					<view class="item" :class="{'disable': thridItem.split(',')[1] == 'f'}"
						v-for="(thridItem, thridIndex) in secondItem" :key="thridIndex"
						@tap.stop="touchstartActive(thridItem)">
						<view class="content">
							{{thridItem.split(',')[0]}}
						</view>
					</view>
				</view>
			</view>
			<!-- 删除键 -->
			<view class="item del-item" @tap.stop="del" :style="{right:(currentIndex==0?'10.5vw':'1vw') }">
				
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyboardList: [], //键盘类型
				currentIndex: 0 //键盘区当前下标
			}
		},
		props: ['kbIndex', 'kbType', 'kbShow'],
		mounted() {
			this.keyboardList = [
				[
					['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
					['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
					['', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', ''],
					['', '', '陕', '甘', '青', '宁', '新', 'W', '', ''],
				],
				[
					['1,f', '2,f', '3,f', '4,f', '5,f', '6,f', '7,f', '8,f', '9,f', '0,f'],
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
					['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
				],
				[
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
					['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
				],
				[
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
					['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
				],
				[
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
					['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
				],
				[
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
					['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
				],
				[
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '军'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警'],
					['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳', ''],
				],
				[
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
					['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
				]
			]
		},
		watch: {
			//获取键盘区域下标
			kbIndex: {
				immediate: true,
				handler(res) {
					//转为数字类型，防止数据类型不能匹配
					this.currentIndex = Number(res);
				}
			}
		},
		methods: {
			done() {
				this.kbShow = true;
				this.$emit('childClose', '');
			},
			//删除
			del() {
				this.$emit('childDel', this.currentIndex);
				if (this.currentIndex == 0) {
					return;
				}
				this.currentIndex--;
				this.$emit('childIndex', this.currentIndex);
			},
			//点击事件
			touchstartActive(res) {
				//键盘包含f字符不执行
				console.log(this.currentIndex, 'emitqian');
				if (res.split(',')[1] == 'f' || res == '') {
					return;
				}
				this.$emit('childValue', res);
				if (this.currentIndex == this.keyboardList.length - 1) {
					this.$emit('hide')

				}
				this.currentIndex++;
				this.$emit('childIndex', this.currentIndex);
				console.log(this.currentIndex, 'emithou');
			}
		}
	}
</script>

<style lang="less" scoped>
	@color: #007AFF;

	.keyboard-wrap {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
		box-sizing: border-box;

		.head {
			overflow: hidden;
			background-color: #ffffff;
			border-top: 1rpx #e6e5ef solid;

			.done {
				float: right;
				width: 150rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: @color;
				font-size: 3.2vw;
				display: flex;

				.iconfont {
					margin-left: 6rpx;
					font-size: 30rpx;
				}
			}
		}

		.key-list {
			padding: 3.467vw 1.067vw 2.133vw;
			margin: 0 auto;
			text-align: center;
			background: #e3e9ec;
		}

		.uni-flex {
			display: flex;
			margin-bottom: 1.867vw;
			-webkit-box-align: center;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			justify-content: center;
		}

		/*iphone键盘*/
		.item {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			margin-right: 1.067vw;
			font-size: 0;

			.content {
				display: inline-block;
				width: 100%;
				line-height: 12vw;
				font-size: 4vw;
				color: #0b0b0b;
				-webkit-box-shadow: 0 0.267vw 0.267vw #d7d7d7;
				box-shadow: 0 0.267vw 0.267vw #d7d7d7;
				background-color: #fff;
				border-radius: 1.067vw;
				z-index: 50;
			}

			&.disable .content {
				color: #dadada;
				background-color: #fff;
			}

			&.item:not(.disable):active .content {
				background-color: @color;
				color: #fff;
			}
		}

		.colspan {
			display: none;

			&.active {
				display: block;
			}
		}

		.del-item {
			position: absolute;
			right: 1vw;
			bottom: 2.5vh;
			width: 9vw;
			height: 12vw;
			background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAcCAYAAAD815boAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNTFhYzJlYi1mOWNhLWVmNDYtYjIxZS04ZTBkYTQ1ZWNhMDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQjczNURBQ0Y5MTFFODk5MkFDRDI4NDg4RTY5MjQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQjczNUNBQ0Y5MTFFODk5MkFDRDI4NDg4RTY5MjQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Nzc0MWYzYTAtNDYxMi00ZTQ4LWExNjYtMDA3YWI2ZDlmODg4IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6N2U1OGRjYzQtMjM3My0xMWU4LTk1OWYtZTA4MmNmMjVmYTkyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+W15VFwAAAchJREFUeNrMljtIAzEYx1Mt4mMQXO3sViehS0Xo4lZEHcTHpoObDxChIoiiiB0s7k4+kKKIgkIHFTddC07iIDqIkw8UxaL/wCeEmLtL0rN3f/hxdyUXfk3y5RLZye8zg0yCLKts7qsMGg+AFVb5NOtKpsA6iAQgyXQk42AP1LCA4iUZA0egkQUYN8kmEoyxgOMkWU+CcRaCqCSrwTZIWPR3CbbAh0e7c7ALSraSayBtIXgDkrRV8fffHdqtgg7QC3I2ktNg1HJWXsEX3RdAl0KUC44Lz8+mknwEFstYOq1gXniWRWXBdjCl03GUrmmfNusMXWck0RTNkih4TAWqJZmgQvFrs1aJFhSCDSbVndP9R4aiC4rfjQV/JUfAyz9sbyqROs1P8R/JIhgE3z4KykXCPKpeq7oPhDXktyCf4tlyRMWhX6IC8luQr8E5aY0aiYqSfLqH6dNmkysw4VIkGYVo1lSS5w308CO7hWRU6M+pimXRWpPNXMwdiZ5SNeqmBZzRiA65vMtF28AD6LeV5LmgrWnDcDSThFc6/Tr0boLlsJ4n5ak5DLtkidZXMcySPE+gGzyGWZLnGvSBzzBL8pyAsQAcb38EGADqpVx5N+uLlgAAAABJRU5ErkJggg==) no-repeat 50%;
			background-size: 5.467vw;
			
    border-radius: 1.067vw;
			// width: 20%;
			// height: 90rpx;
			.iconfont {
				line-height: 1;
				font-size: 50rpx;
			}
		}

	}

	.iconxiala- {
		background-size: 2.267vw;
		background-repeat: no-repeat;
		display: block;
		width: 5.867vw;
		height: 3vh;
		margin-top: 3.1vh;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxRTM1MkM5N0IwQjExRUFBMjg4REY0ODVCRTE2OUUzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxRTM1MkNBN0IwQjExRUFBMjg4REY0ODVCRTE2OUUzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjFFMzUyQzc3QjBCMTFFQUEyODhERjQ4NUJFMTY5RTMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjFFMzUyQzg3QjBCMTFFQUEyODhERjQ4NUJFMTY5RTMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6RjcO5AAAB+ElEQVR42ryWyytEURzHjWdKKRaExTSxYUEplFLyLK+EFDaShYUNC8VOMTvKCguPFSGPhaK88sjO5A/wWGBHNsgwje9Pv1PX8Zs7d+6NX32a7j1z72fOub/znesqmApG/VdF86cbLIBVUPhXslgQBw5ZSFUHmsGug/u6QDcoB/tgEQRJ5jGIqBLBhgMh/fh50MnHXSAezNIy3oAH7QIlrIlQRNetG0SqatUz84MG8ORQmAx2QL0wdmlskAtQ5UCYBo5AmTC2BbxGmRMhPe8TUCCMUWO08Or9kNkR5oJTkCOIJrkjA/o+syMsAscgU7jHCBigdpc2tSSsNBEO8/5J1cZpFn1g3CxBpPKZCMdAknbez3tqOlxcRSrU6xU0gWUr2WhF+BZi/Jmf8Y7VIA6Xc+28fFIlCEtqSxYDZsBQmIjaBNVOZBSeS6DXYiaGFYaS0bJsgzZh7BxUhOhSU6EkSwF73BR67XIzHJhsi5BCXZbBqVAsfHcFNIIXC/tQFBpl2eAM5AkiapIOFagWN/4voZLlc3K7BZGXIyhgI2l+CKP5b5yaIV37MoXoIOdg0GbSKGGJknmE5KZZ9ICJCF4JzIT9SnYNrgyD76CVX1oiLSV81M5/KtkHt/McWAOlPHW75eP73fPxLRj9zr0/fCOm18QscKdm9iXAAMhke9fXWcqOAAAAAElFTkSuQmCC);
	border-radius: 1.067vw;
	}

	
</style>