vue中实现纯数字键盘

已于 2023-12-01 18:37:45 修改
阅读量1.3k 收藏 10
点赞数 9
分类专栏： vue 文章标签： vue.js javascript elementui
于 2023-12-01 18:37:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61911999/article/details/134740337
版权

一、完整 代码展示

<template>
	<div class="login">
		<div class="login-content">
			<img class="img" src="../../assets/image/loginPhone.png" />
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>手机号登录</span>
				</div>
				<div class="text-content">
					<el-form :model="ruleForm" label-width="80px">
						<el-form-item label="手机号" class="keyboard-wrapper">
							<el-input placeholder="请输入手机号" v-model.sync="ruleForm.tel" clearable
								@focus="viewShow('tel')" onfocus="this.blur()" @input="handleInputTel" maxlength="11" show-word-limit>
							</el-input>
						</el-form-item>
						<el-form-item label="验证码" class="keyboard-wrapper">
							<el-input placeholder="请输入验证码" v-model.sync="ruleForm.code" @focus="viewShow('code')"
								onfocus="this.blur()" @input="handleInput" clearable>
								<template slot="append">
									<el-button style="font-size: 22px;" :disabled="Boolean(timer)" @click="getCode">
										{{ timer ? time + "S" : "获取" }}
									</el-button>
								</template>
							</el-input>
							<!-- 手机号键盘 -->
							<div class="keyboard" v-if="telShow">
								<div class="num">
									<table>
										<tr>
											<td @click="changeTel(1)" :class="[tel === 1 ? 'tel' : '']">1</td>
											<td @click="changeTel(2)" :class="[tel === 2 ? 'tel' : '']">2</td>
											<td @click="changeTel(3)" :class="[tel === 3 ? 'tel' : '']">3</td>
											<td rowspan="2" class="delTel" @click="delTel">×</td>
										</tr>
										<tr>
											<td @click="changeTel(4)" :class="[tel === 4 ? 'tel' : '']">4</td>
											<td @click="changeTel(5)" :class="[tel === 5 ? 'tel' : '']">5</td>
											<td @click="changeTel(6)" :class="[tel === 6 ? 'tel' : '']">6</td>
										</tr>
										<tr>
											<td @click="changeTel(7)" :class="[tel === 7 ? 'tel' : '']">7</td>
											<td @click="changeTel(8)" :class="[tel === 8 ? 'tel' : '']">8</td>
											<td @click="changeTel(9)" :class="[tel === 9 ? 'tel' : '']">9</td>
											<td rowspan="2" class="comfirmTel" @click="comfirmTel">确定</td>
										</tr>
										<tr>
											<td @click="changeTel(0)" colspan="3" :class="[tel === 0 ? 'tel' : '']">0</td>
										</tr>
									</table>
								</div>
							</div>
							<!-- 验证码鍵盤 -->
							<div class="keyboard" v-if="show">
								<div class="num">
									<table>
										<tr>
											<td @click="change(1)" :class="[code === 1 ? 'code' : '']">1</td>
											<td @click="change(2)" :class="[code === 2 ? 'code' : '']">2</td>
											<td @click="change(3)" :class="[code === 3 ? 'code' : '']">3</td>
											<td rowspan="2" class="del" @click="del">×</td>
										</tr>
										<tr>
											<td @click="change(4)" :class="[code === 4 ? 'code' : '']">4</td>
											<td @click="change(5)" :class="[code === 5 ? 'code' : '']">5</td>
											<td @click="change(6)" :class="[code === 6 ? 'code' : '']">6</td>
										</tr>
										<tr>
											<td @click="change(7)" :class="[code === 7 ? 'code' : '']">7</td>
											<td @click="change(8)" :class="[code === 8 ? 'code' : '']">8</td>
											<td @click="change(9)" :class="[code === 9 ? 'code' : '']">9</td>
											<td rowspan="2" class="comfirm" @click="comfirm">确定</td>
										</tr>
										<tr>
											<td @click="change(0)" colspan="3" :class="[code === 0 ? 'code' : '']">0</td>
										</tr>
									</table>
								</div>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
			<div style="text-align: center;margin-left: 10px;">
				<el-button type="primary" :loading="loading" :disabled="!ruleForm.tel || !ruleForm.code"
					@click="linkToPage">
					登录
				</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	import storage from "store";
	import { useLogin, getCode } from "@/api/index.js";
	
	export default {
		data() {
			return {
				time: 60,
				ruleForm: {
					tel: "",
					code: "",
				},
				show: false,
				telShow: false,
				NUM: "",
				NUMTEL: "",
				result: [],
				resultTel: [],
				tel: '',
				code: '',
				timer: null,
				loading: false,
			};
		},
		
		computed: {
			// 统计数量
			num: function() {
				return this.result.join("");
			},
			// 统计数量
			numtel: function() {
				return this.resultTel.join("");
			},
		},

		methods: {
			//登录
			linkToPage() {
				this.loading = true;
				useLogin(this.ruleForm).then((res) => {
					if (res.code == 200) {
						storage.set("Access-Token", res.data.token); // 正常请求token
						storage.set("User-Info", JSON.stringify(res.data)); // 正常请求token
						setTimeout(() => {
							this.$router.push("/index")
						}, 2000);
					} else {
						this.$message.error(res.msg);
					}
				}).finally(() => {
					this.loading = false;
				});
			},
			//获取验证码
			getCode() {
				if (!this.ruleForm.tel) return;
                // 检查手机号格式是否正确
				const phoneNumberRegex = /^1[3456789]\d{9}$/;
				if (!phoneNumberRegex.test(this.ruleForm.tel)) {
				  this.$message.warning('手机号格式不正确，请重新输入！');
				  return;
				}
				getCode(this.ruleForm).then((res) => {
					if (res.code === 200) {
						this.$message.success(res.msg);
						this.timer = setInterval(() => {
							if (this.time == 0) {
								clearInterval(this.timer);
								this.timer = null;
								this.time = 60;
							} else {
								this.time--;
							}
						}, 1000);
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			
			//展示数字键盘
			viewShow(type) {
				if (type === 'tel') {
					this.telShow = !this.telShow
					this.show = false
				} else {
					this.show = !this.show
					this.telShow = false
				}
			},
			
			handleInput() {
				if (this.ruleForm.code.length >= 6) return;
			},
			//获取选中的数字 验证码
			change(val, $event) {
				//设置验证码的长度
				if (this.ruleForm.code.length >= 6) return;
				this.ruleForm.code += String(val)
				if (this.result.length === 0) {
					return false;
				} else {
					this.result.push(this.ruleForm.code);
					this.NUM = this.result.join("");
				}
			},
			//验证码刪除
			del() {
				this.ruleForm.code = this.ruleForm.code.slice(0, -1)
				this.NUM = this.result.join("");
				this.$emit("del", this.NUM);
			},
			//验证码確認按鈕
			comfirm() {
				this.$emit("comfirm", this.NUM);
				this.show = false;
			},

			//获取选中的数字 手机号
			changeTel(val, $event) {
				//设置验证码的长度
				if (this.ruleForm.tel.length >= 11) return;
				this.ruleForm.tel += String(val)
				if (this.resultTel.length === 0) {
					return false;
				} else {
					this.resultTel.push(this.ruleForm.tel);
					this.NUMTEL = this.resultTel.join("");
				}
			},
			handleInputTel() {
				if (this.ruleForm.tel.length >= 11) return;
			},
			//刪除 手机号
			delTel() {
				this.ruleForm.tel = this.ruleForm.tel.slice(0, -1)
				this.NUMTEL = this.resultTel.join("");
				this.$emit("delTel", this.NUMTEL);
			},
			//確認按鈕 手机号
			comfirmTel() {
				this.$emit("comfirmTel", this.NUMTEL);
				this.telShow = false;
			},
			
		},
	};
</script>

二、方法详解

1、数据详解：

  • ruleForm对象包含了手机号和验证码两个属性；
  • show和telShow分别表示验证码键盘和手机号键盘是否显示状态；
  • NUM和NUMTEL表示存储选中的验证码和手机号；
  • result和resultTel表示用于存储选中的验证码和手机号的数组；
  • tel和code表示当前选中的手机号和验证码的数字；
  • timer用于控制获取验证码按钮的倒计时；
  • loading表示登录按钮的加载状态。

2、计算属性详解：

  • num：用于将选中的验证码数字拼接为字符串；
  • numtel：用于将选中的手机号数字拼接为字符串。

3、方法详解：

  • viewShow方法用于切换显示手机号键盘或验证码键盘。
  • handleInput方法用于限制验证码输入框的长度不超过6位。
  • change方法用于获取选中的验证码数字，并将其拼接到ruleForm.code中。
  • del方法用于删除最后一个输入的验证码数字。
  • comfirm方法用于确认验证码的输入，同时关闭验证码键盘。
  • 手机号键盘相关方法同验证码键盘类似。

4、方法注释：

 push()：用于向数组末尾添加一个或多个元素 

 slice()：方法接收两个参数起始位置和结束位置（不含结束位置）

 this.ruleForm.tel.slice(0, -1)表示获取this.ruleForm.tel的子数组，从索引0开始，到倒数第一个元素（不含倒数第一个元素）结束。简单来说，它删除了this.ruleForm.tel的最后一个字符，并将剩余的部分赋值给this.ruleForm.tel。

三、Css样式 

<style lang="less" scoped>
	.login {
		padding-top: 80px;
	}
	.login-title {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 80px);
		height: 160px;
		padding: 0 40px;
		background-color: @theme-color;
		color: #fff;
		font-size: 38px;
		font-weight: bold;
	}
	.login-content {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 200px;
	}
	.clearfix {
		text-align: center;
		color: #00aaff;
		font-size: 26px;
	}
	.box-card {
		height: 520px;
		width: 480px;
		border-radius: 20px;
	}
	.keyboard-wrapper {
		user-select: none;
		input {
			width: 100%;
			height: 50px;
			font-size: 26px;
		}
		.keyboard {
			position: fixed;
			margin-top: 10px;
			width: 60%;
			.num {
				table {
					width: 32%;
					border: 1px solid #ccc;
					border-collapse: collapse;
					background: #fff;
					td {
						height: 60px;
						vertical-align: middle;
						color: #333;
						font-size: 20px;
						border: 1px solid #ccc;
						text-align: center;
					}
					td.active {
						background: #ccc;
					}
					.del {
						background: #eee;
					}
					.comfirm {
						font-size: 16px;
						width: 80px;
						background: #62c7eb;
						color: #fff;
					}
					.delTel {
						background: #eee;
					}
					.comfirmTel {
						font-size: 16px;
						width: 80px;
						background: #118eeb;
						color: #fff;
					}
				}
			}
		}
	}
</style>

手机号数字键盘效果图

验证码数字键盘效果图

明思齐
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue Components 数字键盘的实现
10-16
主要介绍了Vue Components 数字键盘的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现移动端H5数字键盘组件使用详解
10-14
在Vue.js中实现移动端H5数字键盘组件是一个常见的需求，特别是在开发支付或输入数字的场景中。本篇文章将深入解析如何构建这样一个自定义组件，并提供详细的代码示例，以帮助开发者理解和实现自己的数字键盘组件。 ...
vue自定义数字键盘
m0_53912016的博客
03-10 4285
输入框快速调出数字键盘 <input type="tel" pattern="[0-9]*">或者 <input type="num" pattern="[0-9]*"> 自定义数字键盘 封装的插件
2024年Web前端最新vue引入js数字小键盘(3)，字节Web前端高工面试
最新发布
2401_84433535的博客
05-11 707
= ‘’ && id === ‘del’){//如果点击的是id为del的表示是删除。webpack的loader到底是什么样的？两小时带你写一个自己loader。打开全栈工匠技能包-1小时轻松掌握SSR。谁说前端不用懂安全，XSS跨站脚本的危害。网易内部VUE自定义插件库NPM集成。生产环境下如歌部署Node.js。两小时精通jq+bs插件开发。}else{//否则。
H5+Vue2: input(number/tel)唤起数字键盘，踩坑日记
weixin_43932309的博客
02-25 3828
h5页面做一个搜索功能，且只支持数字[0-9]输入。首先，可使用成熟组件库（可使用Vant 的Field 输入框）。其次使用input type=tel，非数字的输入需处理成空字符串。最复杂的处理方式是定制一个数字键盘。
vue封装数字键盘
weixin_45843676的博客
07-11 803
vue封装数字键盘
vue3用Grid布局 写了一个数字输入小键盘
weixin_44495327的博客
07-02 602
console.log("等一个人 希望能等到 cj")
vue实现自定义身份证，数字键盘（光标，输入框，键盘）
阿铭的博客
10-29 3697
vue实现自封装身份证键盘（光标，输入框，键盘）组件介绍组件代码插入链接与图片组件使用引用使用参数介绍方法插槽 组件介绍 vue实现自封装身份证键盘（光标，输入框，键盘全手写） 组件代码 <template> <div class="myKeyboard" @click="handleFocus" @blur="handleBlur" tabindex="0"> <div class="input-container"> <!-- <d
vue引入js数字小键盘的实现代码
10-18
在Vue.js应用中，实现一个数字小键盘通常用于输入纯数字的场景，比如表单验证、支付密码等。以下是一个关于如何在Vue中引入并实现JS数字小键盘的详细步骤和知识点： 1. **组件创建**： 首先，我们需要创建一个名为...
Vue 实现拨打电话操作
01-18
1、在vue项目的index.html中添加如下代码： <meta name=”format-detection” content=”telephone=yes” /> 2、在需要调起手机拨号功能的页面，写如下函数： // 调用拨号功能 callPhone (phoneNumber) { ...
一个Vue视频媒体多段裁剪组件的实现示例
12-12
近日项目有个新需求，需要对视频或音频进行多段裁剪然后拼接。例如，一段视频长30分钟，我需要将5-10分钟、17-22分钟、24-29分钟这三段拼接到... 支持鼠标拖拽输入与键盘数字输入两种模式； 支持预览播放指定裁剪片段
使用Vue自定义数字键盘组件(体验度极好)
08-28
最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话 体验很不好，于是自己动手写了一个使用Vue自定义数字键盘组件，具体实现代码大家参考下本
wckeyboard基于vue封装的一个自定义数字键盘
08-10
wc-keyboard 基于 vue 封装的一个自定义数字键盘, 仿照大众点评闪惠买单的价格输入键盘
vue中英文切换键盘
11-19
vue中英文切换虚拟键盘键盘，直接引入可以用，使用方法 import keyborad from "@/components/vitualKeyboard/keyboard.vue"; components{ keyborad }
numerickeyboard手机数字键盘包含一个纯键盘UI和输入框套件
08-10
"numerickeyboard"项目提供了一个专为手机设计的数字键盘UI和输入框套件，支持纯JavaScript、React以及Vue三种主流前端框架，使得开发者能方便地在各种环境下集成这一功能。 一、项目概述 numeric-keyboard项目...
vue 数字软键盘 插件 封装 可拖动
奇点的博客
11-12 879
在一些没有鼠标和键盘的情况下，需要软键盘，可拖动的数字键盘
Vue结合Jquery 实现网页端数字键盘
你走过的路 风都是暖的
09-21 633
input placeholder="登录账号 / 员工编号"
【VUE/H5】H5调起数字键盘的坑，及手写移动端键盘代码
热门推荐
LuviaWu的博客
05-07 1万+
h5 调起数字键盘的坑 为了限制只能输入数字，不能输入小数点、加减号，走了敲多的弯路~~（查各种资料，然后各种测试） 现下来看看笔记： HTML5加入了新的input类型 number，这是方便数量输入的。如果是在移动端中，属性type=”number”和type=”tel”会唤起系统的数字键盘，这对于交互还是挺友好的。 一、 type="number"时 1、只允许输入数字，（兼容ios、安卓）...
vue 虚拟数字键盘
08-19
在你提供的引用内容中，没有提到关于Vue虚拟数字键盘的具体信息。可以根据你的描述，我可以为你提供一种实现Vue虚拟数字键盘的方法。 你可以使用Vue和一些插件来实现虚拟数字键盘。一个可行的解决方案是使用vue- #### 引用[.reference_title] - *1* *2* [vue中 虚拟键盘](https://blog.csdn.net/rikimiao/article/details/127897311)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue 虚拟数字键盘](https://blog.csdn.net/qq_38321137/article/details/119781365)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值