通过input框获取焦点来接收扫码参数
<template>
<div>
<input class="input" type="password" ref="searchInput" v-model="scanCodeValue" :placeholder="placeholder" @focus="focusFn"/>
</div>
</template>
<script>
export default {
data() {
return {
scanCodeValue:'',
placeholder:'请扫码...'
}
},
created() {
// 抓取扫描枪数据
document.onkeydown = (e) => {
// 自动获取input输入框焦点
this.$nextTick( () => {
this.$refs.searchInput.focus();
})
if (e.which === 229) {
// 安卓版PDA扫描枪扫描完后完成键的keycode=229
// 其他类型可根据keycode值来确认哪一个是完成值
setTimeout(() => {
if (this.scanCodeValue.length < 3) return
this.scanCodeValue = ''
},500)
return
}
}
},
watch:{
scanCodeValue(value,oldValue) {
if(!!value){
if(value.includes('storehouse')&&value.includes('location')){
this.$emit('goBack', value)
}else{
this.placeholder='扫码失败，请重新扫码...'
}
}
}
},
destroyed(){
//取消键盘监听事件
document.onkeydown = null
},
methods: {
focusFn(){
this.$refs.searchInput.setAttribute('readonly', 'readonly');
setTimeout(() => {
this.$refs.searchInput.removeAttribute('readonly');
}, 200);
},
}
}
</script>
<style>
.input{
height: 30px;
}
.btn{
margin-top: 15px;
}
.btn button{
width: 50px;
height: 30px;
background-color: #409EFF;
color: #fff;
border: none;
border-radius: 4px;
}
</style>