vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue数字键盘

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数组中定义的内容动态生成的。

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

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

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

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

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

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

OVER!!! 

到此这篇关于vue中实现数字+英文字母组合键盘的文章就介绍到这了,更多相关vue数字键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文