获取pda扫码枪 扫描的数据

1.扫码枪是模拟键盘输入的，输入一连串数字后加一个enter键。所以可以监听键盘事件。

• 新建一个隐藏的 input 用来接收数据，不然扫码枪会自动获取页面存在的一个input的焦点，并将数据显示在input框中。

<template>
  <el-input
    type="text"
    v-model="myvalue"
    id="inputId"
    placeholder=""
    size="normal"
    clearable
    class="inputShow"
  ></el-input>
</template>

// 隐藏 input
.inputShow {
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
}
::v-deep {
  .el-input .el-input__inner {
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

• 在实际开发中需要区分是扫描枪输入还是用户键盘手动输入，区别在于扫码枪输入很快。

data(){
  return {
    code: "", // 扫码数据
    myvalue: "", // 
    lastTime: "",
    nextTime: "",
    lastCode: "",
    nextCode: "",
  }
}
// 退出页面时清空 避免在下一个页面还会生效
beforeDestroy() {
  document.onkeypress = "";
},
mounted() {
  this.scanCode();
},
// 扫码
scanCode() {
  document.onkeypress = (e) => {
    this.nextCode = e.which;
    if (e.which === 13) {
      if (this.code.length < 5) {
        //手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有效
        this.lastTime = null;
        this.lastCode = null;
        console.log("手动");
        this.code = "";
        return;
      }
      // 扫码的 值
      this.myvalue = this.code;
      // 在此处写需要调用的接口
      this.fun()
   
      console.log("自动");
      this.lastTime = null;
      this.lastCode = null;
      this.code = "";
      return;
    }
    this.nextTime = new Date().getTime();
    if (!this.lastTime && !this.lastCode) {
      this.code += e.key;
    }
    if (
      this.lastCode != null &&
      this.lastTime != null &&
      this.nextTime - this.lastTime <= 100
    ) {
      // 将焦点放在 隐藏的 input 框中
      document.getElementById("inputId").focus();
      document.getElementById("inputId").blur();
      this.code += e.key;
    } else if (
      this.lastCode != null &&
      this.lastTime != null &&
      this.nextTime - this.lastTime > 100
    ) {
      //当扫码前有keypress事件时,防止首字缺失
      // this.code = e.key;
    }
    this.lastCode = this.nextCode;
    this.lastTime = this.nextTime;
  };
},