简单一个VUE 集成USB READER 读卡器

原创已于 2023-07-08 09:14:46 修改 · 4.8k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #es6 #html #前端 #javascript

于 2021-01-15 10:26:08 首次发布

import this 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Vue-element-admin中通过vxe-table实现表格点击操作，模拟取卡过程，触发弹框并监听刷卡后动态更新input值。涉及焦点切换、input事件监听和modal管理的代码示例。

项目场景：

后台管理 vue-elment-admin 表格库vxe-table2.9
表格操作区域=>点击取卡=>弹框=>刷卡=>赋值弹框内的input

这个东西
在这里插入图片描述

演示
(虚假数据,演示用途)
在这里插入图片描述

方案

没啥特别的点击操作取卡聚焦输入框代码如下

		this.clearInput();
          this.icCardNo = "";
          const _that = this;
          const activeElement = document.activeElement;
          activeElement.blur(); //找到modal弹框之前的 focus元素
          let inputEle = document.createElement("input");
          inputEle.type = "text";
          inputEle.setAttribute("id", "icCard-input");
          inputEle.setAttribute("value", "");
          inputEle.style =
            "height:0px;width:0px;padding:0px;border:0.1px;z-index:-9999;position:absolute;top:0;";
          document.body.appendChild(inputEle);
          inputEle.focus();
          inputEle.addEventListener("input", function() {
            // 监听 读卡器输入框的输入事件
            if (inputEle.value.length == 10) {
              // 10位截断
              _that.icCardNo = inputEle.value;
              inputEle.value = "";
            }
          });
          this.modalTitle = "取卡叫号";
          this.showModal = true;
          this.$nextTick(() => {
            const modal = document.getElementsByClassName("vxe-modal--wrapper");
            for (let i = 0; i < modal.length; i++) {
              // 监听modal click事件
              if (modal[i].className.indexOf("is--active") != -1) {
                // 获取当前的modal
                modal[i].addEventListener("click", e => {
                  // 监听modal 蒙层的点击事件
                  if (e.target.tagName == "DIV") {
                    // 遮罩层点击
                    let inputEle = document.getElementById("icCard-input");
                    inputEle.focus();
                  }
                });
              }
            }
          });

然后是 clearInput 方法

clearInput() {
      // 清除取卡叫号的 原生添加的input输入框框
      let inputEle = document.getElementById("icCard-input");
      if (inputEle) document.body.removeChild(inputEle);
    },

以上

在这里插入图片描述