<template>
<div>
<Input
type="text"
size="small"
v-model="inputValue"
ref="slotCardInput"
@keyup.native="handleKeyUp"
@keyup.enter.native="executeFunc()"
>
</Input>
</div>
</template>
<script>
export default {
name: "TestQrCodeVue",
data() {
return {
// 输入框内容
inputValue: "",
// 键盘时间触发时间
keyupLastTime: undefined,
// 扫码触发值
realCode: "",
};
},
methods: {
/**
* 键盘事件处理
*
* @param {object} e 键盘触发对象
* @returns
* @author kangdongliang
*/
handleKeyUp(e) {
console.log("KK------打印当前触发键盘事件的对象", e);
// 重置间隔时间
let step = 0;
if (this.keyupLastTime) {
// NOTE:后续应该有更好的解决方法
step = new Date().getTime() - this.keyupLastTime;
console.log("KK------打印键盘事件触发step", step);
// 根据间隔判断是否为扫码还是手动输入
if (step > 50) {
this.realCode = "";
}
}
// 获取键盘事件触发时间
this.keyupLastTime = new Date().getTime();
// 输入法触发key为Process跳过-[判断是否为中文输入]
if ((e.key != "Process" && step < 50) || e.code.trim() == "Enter") {
if (e.key.trim().length == 1) {
// 输入单个字母或者数字
this.realCode += e.key;
console.log("this.输入单个字母或者数字", this.realCode);
} else if (e.code.trim() == "Enter") {
// 根据规则,判断barcode类型,返回数据(自定义规则)
if (!this.realCode) {
return;
}
// NOTE:我的码有规则 所以这里就是校验 你没有就不用
// 校验->赋值
this.inputValue = this.realCode;
// 清空临时变量
this.realCode = "";
if (e.key == "Process") {
this.executeFunc();
}
}
}
this.keyupLastTime = undefined;
// 清空临时变量
this.realCode = "";
},
/**
* 扫码事件处理
*
* @returns
* @author kangdongliang
*/
executeFunc() {
console.log("this.inputValue", this.inputValue);
this.keyupLastTime = undefined;
},
},
};
</script>