前端车牌键盘组件

父组件

// 粘贴回去后格式化一下<div class="input-plate-wrap"><div v-for="(item, index) in keyBoard.kbLenght" :key="index"><divclass="plate-item"v-if="index != keyBoard.kbLenght - 1":class="{ active: index === keyBoard.indexNum }"@click.stop="carPlateInput(index)">{{ keyBoard.value[index] || "" }}</div><!-- 新能源多一位车牌 --><divclass="plate-item"v-if="index == keyBoard.kbLenght - 1":class="{ active: index === keyBoard.indexNum }"@click.stop="carPlateInput(index)"><!-- 如果没有车牌号显示新能源标 --><div>{{ keyBoard.value[index] }}</div><divv-if="isNull(keyBoard.value[index])"style="color: #1aad19"><!-- <text class="iconfont icondiandongche">新</text> -->新</div></div></div></div><keyboard:kbShow="keyBoard.isShow":kbIndex="keyBoard.indexNum":kbType="keyBoard.kbLenght"@childValue="keyboardValue"@childClose="keyboardClose"@childIndex="keyboardIndex"@childDel="keyboardDel"></keyboard>//  记得引入组件// 这个是键盘组件
import keyboard from "@/components/.....";// 这是mixin
import carKeyBoardMixins from "@/components/......";components: {keyboard,},mixins: [carKeyBoardMixins],//  css  样式.jd-input-plate-wrap {display: flex;margin-top: 30upx;.plate-item {position: relative;display: flex;flex: 1;margin: 0 3px;height: 32px;width: 25px;// font-size: @fontSize + 6upx;border: 1px solid #173574;align-items: center;justify-content: center;border-radius: 6px;// background-color: #ffffff;&.active {border: 1px solid #3e6ed4;// background-color: #eafff6;}&:nth-child(2) {margin-right: 30px;&:after {display: block;position: absolute;content: '';height: 10px;width: 10px;right: -26px;border-radius: 12px;background-color: #c3c2cb;}}}.point {display: flex;width: 14px;height: 14px;border-radius: 14px;margin-top: 40px;background-color: #c3c2cb;}// .icondiandongche {// 	color: @color-green;// 	font-size: @fontSize + 20upx;// }
}

mixin中键盘的方法 （注：复制后格式化一下）

<script>
import Vue from "vue";export default {data() {return {// 键盘字段keyBoard: {//键盘isShow: false,isShowModel: false,kbLenght: 8, //车牌输入框长度indexNum: " ", //点击车牌设置焦点的下标value: [], //键盘值},carPlateColor: 1,switchover: true,};},// created(){//   this.carPlateInit()// },methods: {// 清空键盘输入值resetClick() {this.keyBoard.value = [];// this.carPlateInit()},// 搜索处理键盘输入值processingData() {if (this.switchover == false) {var str = "";for (let i = 0; i < this.keyBoard.value.length; i++) {str += this.keyBoard.value[i];}this.queryParams.plateNumber = str;this.keyBoard.isShow = false;}},//动态添加对象setObject(obj, key, value) {Vue.set(obj, key, value);},// 判断类型方法isNull(res) {if (res == undefined ||res == null ||res == "null" ||res === "" ||res == "undefined" ||JSON.stringify(res) === "{}") {return true;} else {return false;}},//删除键盘值keyboardDel(res) {this.setObject(this.keyBoard.value, res, "");if (this.isNull(this.keyBoard.value[7])) {this.carPlateColor = 1; //蓝色车牌}},// 初始化// carPlateInit() {//   var defaultCarPlate = $APPCONFIG.carPlateHeadWord;//   //默认车牌号每个为空//   for (var i = 0; i < this.keyBoard.kbLenght; i++) {//     this.keyBoard.value.push("");//   }//   //键盘默认省份//   for (var i = 0; i < defaultCarPlate.length; i++) {//     this.keyBoard.value[i] = defaultCarPlate[i];//   }// },//车牌焦点下标keyboardIndex(res) {this.keyBoard.indexNum = res;},//键盘点击返回的值keyboardValue(res) {this.setObject(this.keyBoard.value, this.keyBoard.indexNum, res);if (!this.isNull(this.keyBoard.value[7])) {this.carPlateColor = 2; //绿色车牌}},//关闭keyboardClose(res) {this.keyBoard.isShow = res;this.keyBoard.isShowModel = res;this.keyBoard.indexNum = ""; //关闭键盘键盘高亮取消},carPlateInput(res) {this.keyBoard.isShow = true; //显示键盘this.keyBoard.indexNum = res; //设置键盘焦点下标},carPlateInputModel(res) {this.keyBoard.isShowModel = true; //显示键盘this.keyBoard.indexNum = res; //设置键盘焦点下标},},
};
</script><style></style>

键盘子组件 （注：复制后格式化一下）

<template><div class="keyboard-wrap" v-if="kbShow" @click.stop><div class="head"><div class="done" @click="done">完成<text class="iconfont iconxiala-"></text></div></div><div class="key-list"><!-- {{ keyboardList }} --><divclass="colspan"v-if="index === currentIndex"v-for="(item, index) in keyboardList":key="index"><divclass="uni-flex"v-for="(secondItem, secondIndex) in item":key="secondIndex"><divclass="item":class="{ disable: thridItem.split(',')[1] == 'f' }"v-for="(thridItem, thridIndex) in secondItem":key="thridIndex"@click.stop="touchstartActive(thridItem)"><div class="content">{{ thridItem.split(",")[0] }}</div></div></div></div><!-- 删除键 --><div class="item del-item" @click.stop="del"><!-- <div class="content">X</div> --><i class="el-icon-delete"></i></div></div></div>
</template>
<script>
import carKeyBoardMixins from "@/components/mixins/keyword.vue";
export default {data() {return {keyboardList: [], //键盘类型kblength: "",currentIndex: 0, //键盘区当前下标};},mixins: [carKeyBoardMixins],props: ["kbIndex", "kbType", "kbShow"],mounted() {document.addEventListener("click", this.bodyCloseMenus);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", "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);},},},beforeDestroy() {document.removeEventListener("click", this.bodyCloseMenus);},methods: {bodyCloseMenus() {if (this.kbShow == true) {this.$emit("childClose", "");}},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.kbType - 1) {return;}this.currentIndex++;this.$emit("childIndex", this.currentIndex);},},
};
</script><style lang="less">
.keyboard-wrap {position: absolute;left: 0;top: 40px;width: 520px;z-index: 999;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);box-sizing: border-box;background: #284e9d;padding: 0 15px;// 安全区// padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */// padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */.head {overflow: hidden;background-color: #284e9d;.done {cursor: pointer;float: right;width: 60px;height: 45px;line-height: 45px;text-align: center;color: #fff;font-size: 18px;.iconfont {margin-left: 6px;// font-size: 24px;}}}.key-list {position: relative;padding: 4px 0;}.uni-flex {display: flex;justify-content: center;}/*iphone键盘*/.item {width: 50px;height: 50px;line-height: 50px;margin: 6px 0;text-align: center;box-sizing: content-box;color: #fff;.content {// line-height: 90px;background: rgb(6 30 71);font-size: 18px;border-radius: 4px;margin: 0 5px;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);}&.disable .content {background-color: rgb(6 30 71);color: #616668;}&.item:not(.disable):active .content {background-color: #317dfb;color: #fff;}}.item:hover {cursor: pointer;}.del-item {position: absolute;width: 40px;height: 50px;line-height: 50px;border-radius: 4px;top: 75%;right: 25px;background: rgb(6 30 71);font-size: 18px;.iconfont {line-height: 1;// font-size: 50px;}}
}
</style>