1.扫码枪是模拟键盘输入的，输入一连串数字后加一个enter键。所以可以监听键盘事件。

新建一个隐藏的 input 用来接收数据，不然扫码枪会自动获取页面存在的一个input的焦点，并将数据显示在input框中。

type="text"

v-model="myvalue"

id="inputId"

placeholder=""

size="normal"

clearable

class="inputShow"

>

// 隐藏 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;

};

},