全局監(jiān)聽掃碼槍的掃碼數(shù)據(jù)
在 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
}
}
}
監(jiān)聽vuex中scanString的變化
export default {
computed: {
scanString() {
return this.$store.getters.scanString
}
},
watch: {
scanString(s) {
if (s) {
setTimeout(() => {
// 觸發(fā)事件 你要做的事
alert(s)
// 執(zhí)行結(jié)束后重復(fù)為空
this.$store.commit('scanCode/SET_SCANSTRING', '')
}, 100)
}
}
}
}
