1.扫码枪是模拟键盘输入的，输入一连串数字后加一个enter键。所以可以监听键盘事件。
-
新建一个隐藏的 input 用来接收数据，不然扫码枪会自动获取页面存在的一个input的焦点，并将数据显示在input框中。
<template>
<el-input
type="text"
v-model="myvalue"
id="inputId"
placeholder=""
size="normal"
clearable
class="inputShow"
></el-input>
</template>
// 隐藏 input
.inputShow {
height: 0;
width: 0;
margin: 0;
padding: 0;
}
::v-deep {
.el-input .el-input__inner {
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}
-
在实际开发中需要区分是扫描枪输入还是用户键盘手动输入，区别在于扫码枪输入很快。
data(){
return {
code: "", // 扫码数据
myvalue: "", //
lastTime: "",
nextTime: "",
lastCode: "",
nextCode: "",
}
}
// 退出页面时清空 避免在下一个页面还会生效
beforeDestroy() {
document.onkeypress = "";
},
mounted() {
this.scanCode();
},
// 扫码
scanCode() {
document.onkeypress = (e) => {
this.nextCode = e.which;
if (e.which === 13) {
if (this.code.length < 5) {
//手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有效
this.lastTime = null;
this.lastCode = null;
console.log("手动");
this.code = "";
return;
}
// 扫码的 值
this.myvalue = this.code;
// 在此处写需要调用的接口
this.fun()
console.log("自动");
this.lastTime = null;
this.lastCode = null;
this.code = "";
return;
}
this.nextTime = new Date().getTime();
if (!this.lastTime && !this.lastCode) {
this.code += e.key;
}
if (
this.lastCode != null &&
this.lastTime != null &&
this.nextTime - this.lastTime <= 100
) {
// 将焦点放在 隐藏的 input 框中
document.getElementById("inputId").focus();
document.getElementById("inputId").blur();
this.code += e.key;
} else if (
this.lastCode != null &&
this.lastTime != null &&
this.nextTime - this.lastTime > 100
) {
//当扫码前有keypress事件时,防止首字缺失
// this.code = e.key;
}
this.lastCode = this.nextCode;
this.lastTime = this.nextTime;
};
},
