項目中使用到了掃碼槍，記錄下使用方法。掃碼槍也是和鍵盤一樣的一種輸入設(shè)備，一般掃碼結(jié)束后會自帶回車，鍵入的速度會比手動輸入快，可以通過判斷輸入間隔時間判斷是掃碼輸入還是手動輸入。用掃碼槍時輸入法需要切換到英文，中文狀態(tài)下會有bug出現(xiàn)。

html中的一個input

<input class="sweep-box" placeholder="掃描條碼"
           ref="barcodeBox"
           type="text"
           @keyup="sweepBarcode($event)"
           @keydown="sweepDown">

js相關(guān)代碼

export default = {
  data() {
    return {
      keyUpTime: '', 
      keyDownTime: '', // 按鍵按下的時間
      spanTime: 20, // 一個按鍵按下到釋放的時間 小于等于則是掃碼，大于則是手動輸入
      oneKeyTime: '', // 一次按鍵之間的間隔時間
      twoKeyTime: '', // 兩次按鍵之間間隔
      code: '',
    }  
  },
  methods: {
    // 監(jiān)聽按鍵按下
    sweepDown() {
      let curTime = Date.now()
      if (this.keyDownTime !== '' && this.keyDownTime !== NaN) {
        this.twoKeyTime = curTime - this.keyDownTime
      }
      this.keyDownTime = curTime
    },
    // 監(jiān)聽按鍵釋放
    sweepBarcode(e) {
      let keyUpTime = Date.now()
      this.oneKeyTime = keyUpTime - this.keyDownTime
      let isHand = this.checkHandInput();
      if (!isHand) {
         // 掃描輸入狀態(tài)
        // 按鍵的值可以通過 e.key得到 掃碼槍一般掃碼結(jié)束后自帶回車，所以可以通過判斷 e.key 的值是否為 Enter 來設(shè)置掃碼結(jié)束后的操作 
        this.sweep(e)
      } else {
        // 手動輸入狀態(tài)
        if(e.key === 'Enter') {
          // 按下回車后的操作
        }
      }
    },
    // 判斷是掃碼還是手動輸入
    checkHandInput() {
      if ((this.oneKeyTime > this.spanTime)) {
        // 手動輸入
        return true;
      } else {
        // 掃碼輸入
        return false;
      }
    },
    sweep(e, type) {
    //  使用中是 win10系統(tǒng)的一個觸控屏幕，發(fā)現(xiàn)掃碼結(jié)束在回車后會有個 ArrowDown ，所以做了一下處理。
      if (e.key !== 'ArrowDown') {
          // 每次重新掃碼時 清空輸入框
         this.$refs.barcodeBox.value = ''
      }
      if (this.code) {
        if (e.key === 'Enter' || e.keyCode == 13 || e.which == 13) {
          // 得到掃碼的值
          this.code = this.handleShift(this.code)
          return
        }
        this.code = this.code + e.key
      } else {
        if (e.key === 'ArrowDown') {
          this.code = ''
        } else {
          this.code = e.key
        }
      }
    },
    // 在實際操作中發(fā)現(xiàn)在掃碼過程中通過 e.key去會去掃碼內(nèi)容時，遇到大寫字母時會得到 Shift + 小寫字母的組合，如 C 的話會是 Shiftc，所得會有不同，但是如果直接取 input 中的值則是沒有問題。
    // 所以在用 e.key 的方式獲取掃碼內(nèi)容時對 shift 進行以下處理。
   // 通過e.key得到所有掃碼的值后，通過Shift 對值進行分割，之后得到一個數(shù)組，然后對每個數(shù)組中每個元素中的第一個元素進行大寫轉(zhuǎn)換。
    handleShift(str) {
      // 判斷第一個字母是否需要大寫
        let string = str.slice(0, 5)
        let upperArr
        if (string === 'Shift') {
          let newArr = str.split('Shift')
          upperArr = newArr.map(item => {
            let item1
            if (item) {
              item1 = item.slice(0, 1).toUpperCase() + item.slice(1)
            }
            return item1
          })
        } else {
          let newArr = str.split('Shift')
          let headItem = newArr.slice(0, 1)
          let body = newArr.slice(1)
          let arr1 = body.map(item => {
            let item1 = item.slice(0, 1).toUpperCase() + item.slice(1)
            return item1
          })
          upperArr = headItem.concat(arr1)
        }
        return upperArr.join('')
      },
  }
}

參考了 git 上的一個關(guān)于掃碼的代碼
https://github.com/bigbignerd/jQuery_barcode_listener/blob/master/src/jquery.barcode.js