vue实现数字+英文字母组合键盘功能
作者：明思齐
这篇文章主要介绍了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>代码详解
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!!!
到此这篇关于vue中实现数字+英文字母组合键盘的文章就介绍到这了,更多相关vue数字键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！