electron对接扫码盒子

之前也对接过扫码枪，写了篇文章，文章链接在这：web实现简易扫码枪监听，网友在文章中指出扫码枪本质就是监听键盘输入事件，最后触发回车。这次需要对接扫码盒子了，和扫码枪实际上是一样的，我们只需要监听keydown事件,每次去拼接输入的key，当判断出key为Enter（回车）的时候停止拼接，直接打印出结果。

最终展示

https://gitee.com/pearpear/electron-scan-qr-code-demo

核心代码

let scanCode = ref(''); // 存储扫码输入的字符
// 组件挂载时添加监听
onMounted(() => {
  window.addEventListener('keydown', handleKeyDown);
  console.log('全局扫码监听已启动');
});

// 组件卸载时移除监听
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown);
  console.log('全局扫码监听已移除');
});

// 处理扫码结果
const handleScanResult = (code) => {
  console.log('扫码结果:', code);
  message.success(`扫码成功: ${code}`, 10);
};

// 键盘事件监听
const handleKeyDown = (e) => {
  // 回车键表示扫码结束
  if (e.key === 'Enter') {
    e.preventDefault(); // 阻止默认回车行为
    if (scanCode.value.trim()) {
      handleScanResult(scanCode.value.trim());
      scanCode.value = ''; // 清空扫码内容
    }
    return;
  }
  // 拼接字符(只拼接单个可见字符)
  if (e.key.length === 1) {
    scanCode.value += e.key;
  }
};

注意事项

1. 二维码不能有中文，扫码盒子无法正确识别不出来（会显示乱码或者英文数字）
2. 如果有输入法，必须切换到英文，同1
3. 如果有特殊符号识别不出来，需要自己在键盘输入事件中额外做replace处理

哦对了，我最近开发了一个叫牛马工作器的chrome拓展插件，很好玩哦，感兴趣的话，给我的公众号回复牛马即可免费获取。

我的微信公众号： 梨的前端小屋