一、第一种效果如下面所示(直接显示)
代码部分
<!-- 英文 数字 键盘 --><div class="allBoard"><van-popupv-model="show_allBoard"position="bottom":overlay="false"overlay-class="displayNone"><div class="plate_number_box"><!-- 点击对应的字母或数字，进行输入 --><van-buttonsize="small"v-for="(item, index) in English_Number":key="item.id"@click="checkEnglish_num(index)">{{ item.name }}</van-button><!-- <div class="close-box" @click.stop="close_keyboard"><div>╳</div><li></li></div> --></div></van-popup></div>
data() {return {loginForm: {code: "",},show_allBoard: true, //是否显示英文数字键盘English_Number: [{ name: "1", id: 28 },{ name: "2", id: 29 },{ name: "3", id: 30 },{ name: "4", id: 31 },{ name: "5", id: 32 },{ name: "6", id: 33 },{ name: "7", id: 34 },{ name: "8", id: 35 },{ name: "9", id: 36 },{ name: "0", id: 37 },{ name: "删除", id: 99 },{ name: "Q", id: 38 },{ name: "W", id: 39 },{ name: "E", id: 40 },{ name: "R", id: 41 },{ name: "T", id: 42 },{ name: "Y", id: 43 },{ name: "U", id: 44 },{ name: "I", id: 45 },{ name: "O", id: 46 },{ name: "P", id: 47 },{ name: "A", id: 48 },{ name: "S", id: 49 },{ name: "D", id: 50 },{ name: "F", id: 51 },{ name: "G", id: 52 },{ name: "H", id: 53 },{ name: "J", id: 54 },{ name: "K", id: 55 },{ name: "L", id: 56 },{ name: "Z", id: 57 },{ name: "X", id: 58 },{ name: "C", id: 59 },{ name: "V", id: 60 },{ name: "B", id: 61 },{ name: "N", id: 62 },{ name: "M", id: 63 },{ name: "确认", id: 100 },],numArr: [],};},methods:{// 虚拟键盘checkEnglish_num(index) {// 如果点击删除键，删除 numArr 的最后一个值if (this.English_Number[index].id == 99) {//删除this.numArr.pop();this.loginForm.code = this.numArr.toString().replace(/,/g, "");// // 如果 numArr 里面被删的没有值了，切换键盘// if (this.numArr.length == 0) {// this.show_allBoard = false;// }} else if (this.English_Number[index].id == 100) {//确定//this.submit();} else {// 把选中的值 push 到 numArr 内this.numArr.push(this.English_Number[index].name);// // 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个// if (this.numArr.length > 7) {// this.numArr.pop();// }this.loginForm.code = this.numArr.toString().replace(/,/g, "");}},// 关闭虚拟键盘close_keyboard() {this.show_allBoard = false;},submit() {// 键盘最后输入值if (this.loginForm.code == "") {handleMessage("输入内容不能为空!");return;}console.log(this.loginForm.code)},}
.allBoard {.van-popup {@extend .overflow-y;}.plate_number_box {width: 100%;@extend .class-plate-box;.close-box {@extend .class-close-box;div {@extend .class-close-box-div;}li {@extend .class-close-box-li;}}.van-button--small {width: 8.8%;height: 2rem;@extend .class-van-button-small;}.van-button--small:nth-child(1) {margin-bottom: 5px;}.van-button--small:nth-child(12) {margin-left: 5%;}.van-button--small:nth-child(22) {margin-left: 9%;}.van-button--small:nth-child(31) {margin-left: 11.5%;}.van-button--small:last-child {width: 13%;}}}.displayNone {display: none !important;}
二、第二种效果如下图所示(弹框+倒计时功能)
代码部分
<section class="messageMask" v-if="ifWritePopUp" @click="clickFocus"><div class="messageMaskContent" style="height: 52em"><div class="message-title" style="height: 25%">提示</div><div class="message-title-close" @click="onClose">关闭({{ countDownVal }}S)</div><div class="message-content"><div class="screen-sign-mid"><div class="screen-sign-mid-inner"><inputclass="self-el-input"type="text"v-model="cardNo"ref="cardNoInput"/><buttonclass="self-el-button"type="button"@click.stop="checkIn()">确认</button></div></div><div class="screen-sign-footer"><div class="keyboard-wrap"><divclass="key-group-item"v-for="(keyItem, index) in keyList":key="index"><divclass="key-item":style="item.type == 'letter' ? '' : 'width:155px;'"v-for="(item, index) in keyItem":key="index":data-type="item.type"@click.stop="keyboardClick"><span class="vertical-center">{{ item.text }}</span></div></div></div></div></div></div></section>
data() {return {ifWritePopUp: false,countDownVal: 30,showTimer: null,cardNo: "",//键盘输入内容keyList: [// 键盘布局[{ text: "1", type: "letter" },{ text: "2", type: "letter" },{ text: "3", type: "letter" },{ text: "4", type: "letter" },{ text: "5", type: "letter" },{ text: "6", type: "letter" },{ text: "7", type: "letter" },{ text: "8", type: "letter" },{ text: "9", type: "letter" },{ text: "0", type: "letter" },],[{ text: "Q", type: "letter" },{ text: "W", type: "letter" },{ text: "E", type: "letter" },{ text: "R", type: "letter" },{ text: "T", type: "letter" },{ text: "Y", type: "letter" },{ text: "U", type: "letter" },{ text: "I", type: "letter" },{ text: "O", type: "letter" },{ text: "P", type: "letter" },],[{ text: "A", type: "letter" },{ text: "S", type: "letter" },{ text: "D", type: "letter" },{ text: "F", type: "letter" },{ text: "G", type: "letter" },{ text: "H", type: "letter" },{ text: "J", type: "letter" },{ text: "K", type: "letter" },{ text: "L", type: "letter" },],[{ text: "Z", type: "letter" },{ text: "X", type: "letter" },{ text: "C", type: "letter" },{ text: "V", type: "letter" },{ text: "B", type: "letter" },{ text: "N", type: "letter" },{ text: "M", type: "letter" },],[{ text: "回删", type: "delete" },{ text: "重置", type: "reset" },],],};},created() {this.beginCountDown();this.ifWritePopUp = true;this.$nextTick(function () {this.$refs["cardNoInput"].focus();});},methods:{// 处理数字键盘事件keyboardClick(event) {let text = event.currentTarget.innerText;let type = event.currentTarget.getAttribute("data-type");switch (type) {case "letter":this.cardNo += text;break;case "delete":this.cardNo = this.cardNo.substr(0, this.cardNo.length - 1);break;case "reset":this.cardNo = "";break;}this.$refs.cardNoInput.focus();},checkIn() {//手动输入if (this.cardNo == "") {this.$refs["cardNoInput"].focus();return;}//执行输入后确定操作this.cardNo = "";},beginCountDown(time = 30) {//开启提示窗倒计时//直接倒计时30sif (this.showTimer) {clearInterval(this.showTimer);}this.countDownVal = time;this.showTimer = setInterval(() => {if (this.countDownVal > 1) {this.countDownVal--;} else {clearInterval(this.showTimer);this.showTimer = null;this.onClose();}}, 1000);},onClose() {if (this.ifWritePopUp) {this.ifWritePopUp = false;this.cardNo = "";}},clickFocus() {//点击屏幕任何地方都聚焦if (this.ifWritePopUp) {this.$refs.cardNoInput.focus();}},}
.messageMask {position: fixed;top: 0;bottom: 0;left: 0;width: 100%;background-color: rgba(0, 0, 0, 0.3);z-index: 9;}.messageMaskContent {position: absolute;top: 25%;left: 30%;width: 40%;height: 55em;border: 1px solid #eee;background: #fff;border-radius: 20px;box-shadow: 3px 8px 5px rgba(0, 0, 0, 0.3);}.message-title {position: relative;width: 100%;height: 25%;background-color: #1989fa;text-align: center;font-weight: bold;font-size: 50px;color: #fff;overflow: hidden;border-top-left-radius: 20px;border-top-right-radius: 20px;display: flex;justify-content: center;align-items: center;}.message-title-close {position: absolute;font-size: 40px;right: 15px;top: 15px;color: #fff;}.message-content {height: 70%;padding: 10px 20px 0;}.screen-sign-mid {position: relative;width: 100%;height: 80px;padding: 3px;box-sizing: border-box;background-color: #fff;color: #34592d;}.screen-sign-mid .screen-sign-mid-inner {width: 100%;height: 100%;position: relative;box-sizing: border-box;}.self-el-input {display: inline-block;width: 100%;height: 100%;padding: 0 100px 0 15px;font-size: 50px;color: #000;border: 2px solid #1989fa;-webkit-appearance: none;background-color: #fff;background-image: none;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);transition: border-color .2s cubic-bezier(.645, .045, .355, 1);outline: 0;}.self-el-button {display: inline-block;position: absolute;top: 2px;right: 2px;width: 120px;height: 70px;margin: 0;font-weight: bold;font-size: 30px;letter-spacing: 5px;line-height: 1;border: 1px solid #ccc;color: #000;background-color: #ccc;white-space: nowrap;-webkit-appearance: none;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: .1s;transition: .1s;outline: 0;cursor: pointer;}.screen-sign-main .screen-sign-footer {position: relative;width: 100%;height: auto;background-color: #fff;text-align: center;color: #333;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}.keyboard-wrap {width: 100%;margin-top: 10px;box-sizing: border-box;}.keyboard-wrap .key-group-item {width: 100%;height: auto;text-align: center;}.key-group-item .key-item {display: inline-block;position: relative;width: 60px;height: 65px;line-height: 65px;margin: 0 2px 8px 2px;color: #000;font-size: 40px;box-sizing: border-box;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 15px;background-color: #bbb;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: pointer;}.key-item:hover {background-color: #ccc;}.key-item:active {background-color: #666;}
