自定义的车牌号键盘组件

<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>