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

html中的一個(gè)input

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

js相關(guān)代碼

export default = {
  data() {
    return {
      keyUpTime: '', 
      keyDownTime: '', // 按鍵按下的時(shí)間
      spanTime: 20, // 一個(gè)按鍵按下到釋放的時(shí)間 小于等于則是掃碼，大于則是手動(dòng)輸入
      oneKeyTime: '', // 一次按鍵之間的間隔時(shí)間
      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 {
        // 手動(dòng)輸入狀態(tài)
        if(e.key === 'Enter') {
          // 按下回車后的操作
        }
      }
    },
    // 判斷是掃碼還是手動(dòng)輸入
    checkHandInput() {
      if ((this.oneKeyTime > this.spanTime)) {
        // 手動(dòng)輸入
        return true;
      } else {
        // 掃碼輸入
        return false;
      }
    },
    sweep(e, type) {
    //  使用中是 win10系統(tǒng)的一個(gè)觸控屏幕，發(fā)現(xiàn)掃碼結(jié)束在回車后會(huì)有個(gè) ArrowDown ，所以做了一下處理。
      if (e.key !== 'ArrowDown') {
          // 每次重新掃碼時(shí) 清空輸入框
         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
        }
      }
    },
    // 在實(shí)際操作中發(fā)現(xiàn)在掃碼過程中通過 e.key去會(huì)去掃碼內(nèi)容時(shí)，遇到大寫字母時(shí)會(huì)得到 Shift + 小寫字母的組合，如 C 的話會(huì)是 Shiftc，所得會(huì)有不同，但是如果直接取 input 中的值則是沒有問題。
    // 所以在用 e.key 的方式獲取掃碼內(nèi)容時(shí)對(duì) shift 進(jìn)行以下處理。
   // 通過e.key得到所有掃碼的值后，通過Shift 對(duì)值進(jìn)行分割，之后得到一個(gè)數(shù)組，然后對(duì)每個(gè)數(shù)組中每個(gè)元素中的第一個(gè)元素進(jìn)行大寫轉(zhuǎn)換。
    handleShift(str) {
      // 判斷第一個(gè)字母是否需要大寫
        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 上的一個(gè)關(guān)于掃碼的代碼
https://github.com/bigbignerd/jQuery_barcode_listener/blob/master/src/jquery.barcode.js