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.password
						break;
				}
				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 = 0
							this.ifInitialize = res.data
							//true初始化设置文件打印消耗品配置的密码
							if (this.ifInitialize === true) {
								this.dialogSetFile = true
								this.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 = 0
						this.$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>