vue使用扫码枪，全局监听

全局监听扫码枪的扫码数据

在 src 下新建文件 scanCode.js，并在 main.js 引入即可

scanCode.js

import store from './store'

function scanCode() {
  let str = ''
  document.onkeydown = function() {
    if (event.target.tagName !== 'BODY') {
      str = ''
    } else {
      if (event.keyCode !== 13) {
        if (event.keyCode >= 32 && event.keyCode <= 126) {
          let k = event.key
          str += k
        }
      } else {
        if (str) {
          store.commit('scanCode/SET_SCANSTRING', str)
        }
        str = ''
      }
    }
  }
}

export default scanCode()

main.js

import Vue from 'vue'

import App from './App'
import store from './store'
import router from './router'
import './scanCode' // 扫码

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

增加扫码的vuex

在modules中新建文件scanCode.js，并在getters.js中增加scanString: state => state.scanCode.scanString

export default {
  namespaced: true,
  state: {
    // 扫码的值
    scanString: ''
  },
  mutations: {
    SET_SCANSTRING: (state, scanString) => {
      state.scanString = scanString
    }
  }
}

监听vuex中scanString的变化

export default {
  computed: {
    scanString() {
      return this.$store.getters.scanString
    }
  },
  watch: {
    scanString(s) {
      if (s) {
        setTimeout(() => {
          // 触发事件 你要做的事
          alert(s)
          // 执行结束后重复为空
          this.$store.commit('scanCode/SET_SCANSTRING', '')
        }, 100)
      }
    }
  }
}