完整代码
<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>代码详解
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!!!
