vue中实现纯数字键盘

一、完整 代码展示

---

二、方法详解

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样式 

---

手机号数字键盘效果图

验证码数字键盘效果图