vue中实现数字+英文字母组合键盘

  完整代码

---

代码详解 

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!!!