前端车牌键盘组件

父组件

// 粘贴回去后格式化一下 {{ keyBoard.value[index] || "" }}{{ keyBoard.value[index] }}<!-- 新 -->新//记得引入组件// 这个是键盘组件import keyboard from "@/components/.....";// 这是mixinimport 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中键盘的方法（注：复制后格式化一下）

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; //设置键盘焦点下标},},};

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

完成<!-- {{ keyboardList }} -->{{ thridItem.split(",")[0] }}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);},},};.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 */.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;}}}