vue对接扫码设备-键盘事件

64 阅读1分钟

外接设备,例如扫码盒子、扫码枪、一体机等其原理都是键盘事件,因此web页面对接设备从键盘入手

1.添加监听键盘输入事件、并在页面销毁时移除该事件

onMounted(async () => {
  window.addEventListener("keydown", handleGlobalKey);
});

onBeforeUnmount(() => {
  window.removeEventListener("keydown", handleGlobalKey);
});

2.事件处理

let timeoutId: any;
let ids = "";
const handleGlobalKey = (e: any) => {
  e.stopPropagation();
  clearTimeout(timeoutId);
  if (e.key !== " " && !isNaN(e.key)) { // 这里我只取数字,其它逻辑请自定义
    ids += e.key;
  }
  timeoutId = setTimeout(() => {
    console.log("input", ids); // 输出结果
  }, 300);
};