vue h5 车牌键盘 输入插件

接下来带大家用一个键盘输入车牌号的的使用
看下效果图

首先在compoents里引入写好的插件

<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">
				<view class="content">
					<text class="iconfont iconshanchu1"></text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyboardList: [], 		//键盘类型
				currentIndex: 0 		//键盘区当前下标
			}
		},
		props: ['kbIndex', 'kbType', 'kbShow'],
		mounted() {
			this.keyboardList = [
				[
					['京', '粤', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '渝'],
					['苏', '浙', '皖', '闽', '赣', '鲁', '鄂', '沪', '宁'],
					['桂', '琼', '川', '贵', '云', '藏', '陕', '新'],
					[ '豫', '湘', '青', '甘'],
				],
				[
					['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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', 'P'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ''],
					['Z', 'X', 'C', 'V', 'B', 'N', 'M', '', '', ''],
				]
			]
		},
		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字符不执行
				if(res.split(',')[1] == 'f' || res == ''){
					return;
				}
				this.$emit('childValue', res);
				if(this.currentIndex == this.keyboardList.length - 1){
					return
				}
				this.currentIndex ++;
				this.$emit('childIndex', this.currentIndex);
			}
		}
	}
</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 30upx rgba(0, 0, 0, .1);
		box-sizing: border-box;
		.head{
			overflow: hidden;
			background-color: #ffffff;
			border-top: 1upx #e6e5ef solid;
			.done{
				float: right;
				width: 150upx;
				height: 90upx;
				line-height: 90upx;
				text-align: center;
				color: @color;
				font-size: 34upx;
				.iconfont{
					margin-left: 6upx;
					font-size: 30upx;
				}
			}
		}
		
		.key-list{
			padding: 4px 0;
			background: #e3e9ec;
		}
		.uni-flex{
			justify-content: center;
		}
		/*iphone键盘*/
		.item {
			width: 10%;
			height: 90upx;
			margin: 6upx 0;
			text-align: center;
			box-sizing: content-box;
			.content{
				line-height: 90upx;
				background: #fff;
				font-size: 50upx;
				border-radius: 8upx;
				margin: 0 6upx;
				box-shadow: 0 2upx 2upx rgba(0, 0, 0, .1);
			}
			&.disable .content{
				background-color: #d6dde0;
				color: #acb5b9;
			}
			&.item:not(.disable):active .content {
				background-color: @color;
				color: #fff;
			}
		}
		.colspan {
			display: none;
			&.active {
				display: block;
			}
		}
		.del-item{
			position: absolute;
			right: 4upx;
			bottom: 6upx;
			width: 20%;
			height: 90upx;
			.iconfont{
				line-height: 1;
				font-size: 50upx;
			}
		}

	}
</style>

在自己的页面直接引入

import keyboard from '@/components/keyboard/keyboard'
components: {
			keyboard
		},

在页面加载

<!-- 键盘 -->
		<keyboard :kbShow="keyBoard.isShow" :kbIndex="keyBoard.indexNum" :kbType="keyBoard.length" @childValue="keyboardValue"
		 @childClose="keyboardClose" @childIndex="keyboardIndex" @childDel="keyboardDel"></keyboard>

在data里插入数据

keyBoard: { //键盘
					isShow: false,
					kbLenght: 8, //车牌输入框长度
					indexNum: ' ', //点击车牌设置焦点的下标
					value: [], //键盘值
				},

在methods 写入方法

methods: {
			//点击车牌输入框
			carPlateInput(res) {
				this.keyBoard.isShow = true; //显示键盘
				this.keyBoard.indexNum = res; //设置键盘焦点下标
			},
			//键盘点击返回的值
			keyboardValue(res) {
				this.$setObject(this.keyBoard.value, this.keyBoard.indexNum, res)
			},
			//删除键盘值
			keyboardDel(res) {
				this.$setObject(this.keyBoard.value, res, '')
			},
			//关闭
			keyboardClose(res) {
				this.keyBoard.isShow = res;
				this.keyBoard.indexNum = ""; //关闭键盘键盘高亮取消
			},
			//车牌焦点下标
			keyboardIndex(res) {
				this.keyBoard.indexNum = res;
			},

在页面写入那个输入框

<view class="input-plate-wrap">
				<template v-for="(item, index) in keyBoard.kbLenght">
					<view class="plate-item" v-if="index != keyBoard.kbLenght - 1" :class="{'active': index === keyBoard.indexNum}"
					 @tap="carPlateInput(index)">
						{{keyBoard.value[index] || ''}}
					</view>
					<!-- 新能源多一位车牌 -->
					<view class="plate-item" v-if="index == keyBoard.kbLenght - 1" :class="{'active': index === keyBoard.indexNum}"
					 @tap="carPlateInput(index)">
						<!-- 如果没有车牌号显示新能源标 -->
						<template v-if="!$isNull(keyBoard.value[index])">
							{{keyBoard.value[index]}}
						</template>
						<template v-if="$isNull(keyBoard.value[index])">
							<text class="iconfont icondiandongche"></text>
						</template>
					</view>
				</template>
			</view>

css

.input-plate-wrap {
			display: flex;
			margin-top: 30upx;
			.plate-item {
				position: relative;
				display: flex;
				flex: 1;
				margin: 0 6upx;
				height: 90upx;
				font-size: @fontSize + 6upx;
				border: 3upx solid #c3c2cb;
				align-items: center;
				justify-content: center;
				border-radius: @borderRadius;
				background-color: #ffffff;
				&.active {
					border: 3upx solid @color-green;
				}
				&:nth-child(2) {
					margin-right: 30upx;
					&:after {
						display: block;
						position: absolute;
						content: '';
						height: 10upx;
						width: 10upx;
						right: -26upx;
						border-radius: 12upx;
						background-color: #c3c2cb;
					}
				}
			}

			.point {
				display: flex;
				width: 14upx;
				height: 14upx;
				border-radius: 14upx;
				margin-top: 40upx;
				background-color: #c3c2cb;
			}
			.icondiandongche {
				color: @color-green;
				font-size: @fontSize + 20upx;
			}
		}