vue中实现数字+英文字母组合键盘

  完整代码

<template><div class="login"><div @click="setFileClick">欢迎使用员工自助终端</div><el-dialog title="初始化设置文件打印消耗品配置密码" :visible.sync="dialogSetFile" width="600px"><el-form :model="fileForm" ref="fileForm" status-icon label-width="100px"><el-form-item label="密码" prop="password"><el-input type="password" v-model="fileForm.password" show-password @focus="ifWritePopUp = true"></el-input></el-form-item><div class="screen-sign-mid" style="display: none;"><div class="screen-sign-mid-inner"><input class="self-el-input" type="text" v-model="password" ref="passwordInput" /><button class="self-el-button" type="button" @click.stop="checkIn()">确认</button></div></div><!-- 键盘组件开始 --><div class="keyboard-wrap" v-show="ifWritePopUp"><div class="key-group-item" v-for="(keyItem, index) in keyList" :key="index"><div class="key-item" :style="item.type == 'letter' ? '' : 'width:135px;'" 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 style="text-align: center;"><el-button type="primary" @click="submitForm" icon="el-icon-check">提交</el-button><el-button @click="resetForm" icon="el-icon-delete">重置</el-button></div></el-form></el-dialog></div>
</template>
<script>import { queryInitializeFile, initPassword } from "@/api/setFile";export default {data() {return {clickCount: 0, //点击次数dialogSetFile: false, //初始化文件配置ifInitialize: '', //是否初始化fileForm: {password: '',},ifWritePopUp: false,password: "", //键盘输入内容keyList: [// 键盘布局[{ text: "1",type: "digit"},{ text: "2",type: "digit"},{ text: "3",type: "digit"},{ text: "4",type: "digit"},{ text: "5",type: "digit"},{ text: "6",type: "digit"},{ text: "7",type: "digit"},{ text: "8",type: "digit"},{ text: "9",type: "digit"},{ text: "0",type: "digit"}],[{text: "Q",type: "digit"},{text: "W",type: "digit"},{text: "E",type: "digit"},{text: "R",type: "digit"},{text: "T",type: "digit"},{text: "Y",type: "digit"},{text: "U",type: "digit"},{text: "I",type: "digit"},{text: "O",type: "digit"},{text: "P",type: "digit"}],[{text: "A",type: "digit"},{text: "S",type: "digit"},{text: "D",type: "digit"},{text: "F",type: "digit"},{text: "G",type: "digit"},{text: "H",type: "digit"},{text: "J",type: "digit"},{text: "K",type: "digit"},{text: "L",type: "digit"}],[{text: "Z",type: "digit"},{text: "X",type: "digit"},{text: "C",type: "digit"},{text: "V",type: "digit"},{text: "B",type: "digit"},{text: "N",type: "digit"},{text: "M",type: "digit"}],[{text: "回删",type: "delete"},],],};},methods: {// 处理键盘事件keyboardClick(event) {let text = event.currentTarget.innerText;let type = event.currentTarget.getAttribute("data-type");switch (type) {case "digit":this.password += text;this.fileForm.password = this.password;break;case "delete":this.password = this.password.substr(0, this.password.length - 1);this.fileForm.password = this.passwordbreak;}this.$refs.passwordInput.focus();},checkIn() {if (this.password == "") {this.$refs["passwordInput"].focus();return;}this.password = "";this.ifWritePopUp = false},//点击事件setFileClick() {this.clickCount += 1; // 每次点击增加计数器的值this.fileForm = {}if (this.clickCount === 5) {//检查是否要初始化设置文件打印消耗品配置的密码queryInitializeFile().then((res) => {if (res && res.code === 200) {this.clickCount = 0this.ifInitialize = res.data//true初始化设置文件打印消耗品配置的密码if (this.ifInitialize === true) {this.dialogSetFile = truethis.password = ""this.ifWritePopUp = true}} else {this.$message.error(res.msg);}})}},//提交按钮submitForm() {if (!this.fileForm.password) {this.$message.warning('请输入密码');return;}// 密码正则表达式const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,8}$/;if (!passwordRegex.test(this.fileForm.password)) {this.$message.warning('密码由数字和英文字母组成，且长度为6~8位');return;}//初始化设置文件打印消耗品配置密码initPassword(this.fileForm.password).then((res) => {if (res && res.code == 200) {this.clickCount = 0this.$message.success(res.msg);this.dialogSetFile = false} else {this.$message.error(res.msg);}});},//密码清空重置resetForm() {this.password = ''this.fileForm = {}},},};
</script>
<style lang="less" scoped>.login {padding-top: 80px;}.screen-sign-mid {position: relative;width: 100%;height: 80px;padding: 3px;box-sizing: border-box;background-color: #eee;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: 78%;height: 80%;padding: 0 100px 0 15px;font-size: 26px;color: #000;border: 2px solid #35b9ff;border-radius: 10px;-webkit-appearance: none;background-color: #eee;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: 100px;height: 56px;margin: 0;font-size: 22px;border-radius: 10px;border: 2px solid #35b9ff;color: #fff;background-color: #35b9ff;}.keyboard-wrap {width: 100%;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: 50px;height: 50px;line-height: 50px;margin: 0 2px 8px 2px;color: #000;font-size: 20px;box-sizing: border-box;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 15px;background-color: #dedede;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: pointer;}
</style>

---

代码详解 

1、键盘界面是根据keyList数组中定义的内容动态生成的。

• 我在外层使用了v-show="ifWritePopUp"来控制键盘界面的显示与隐藏。
• 通过v-for="(keyItem, index) in keyList" :key="index"遍历keyList数组，生成多个key-group-item，每个key-group-item代表一行键位。
• 在每个key-group-item内部，再次通过v-for="(item, index) in keyItem" :key="index"遍历keyItem数组，生成具体的按键元素。
• 每个按键元素使用:style属性来动态设置样式，根据item.type的值来确定是否为字母键位，从而动态设置宽度。
• 通过:data-type="item.type" @click.stop="keyboardClick"将按键的类型和点击事件绑定到对应的DOM元素上。

 

上图所示方法，主要用于处理用户在虚拟键盘上的点击操作，动态更新密码输入框中的内容，并保持输入焦点的流畅切换

• 当用户点击键盘上的按键时，触发keyboardClick方法，同时将事件对象event作为参数传入
• 通过event.currentTarget获取被点击的按键元素，然后分别获取该按键的文本内容和数据类型；
• 根据被点击的按键的数据类型，判断是字母键还是删除键，并进行相应的逻辑处理：
  • 若是字母键，则将该字母添加到密码输入框中，并更新fileForm.password的值；
  • 若是删除键，则从密码输入框中删除最后一个字符，并更新fileForm.password的值
• 最后，调用this.$refs.passwordInput.focus()将焦点重新定位到密码输入框，以便继续执行输入或删除操作。

        我在这边设置了CSS样式属性display: none;可以使元素不显示在页面上(即隐藏)。这意味着该元素将不会占据任何空间，并且无法通过直接的交互方式与用户进行互动。

  @click.stop是Vue中阻止事件冒泡的指令（防止该事件继续向上传播，避免重复执行相同的事件处理函数）。它可以通过在事件处理函数中使用event.stopPropagation()方法来停止事件向父级元素传播。

        简单来说，当用户在元素上点击鼠标时，会触发该元素的点击事件，并向父级元素依次传播。如果在某个父级元素上绑定了相同类型的事件处理函数，则该函数也会被调用。

---

数字+英文字母键盘效果图展示

        未设置style="display: none;"，隐藏输入框和确认按钮的效果图     

 

 

---

OVER!!!