Vue3 实现扫码枪监听与二维码解析

以下是一个基于 Vue3 的扫码枪监听与二维码解析的完整实现。通过监听键盘事件，识别扫码枪输入的内容，并对二维码数据进行解析和处理。

---

代码实现

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 定义扫码结果的响应式变量
const scannedBarcode = ref('');

// 定义全局变量
let barCode = '';
let lastTime = 0;

// 监听扫码枪输入
const eventListenerScanCode = () => {
  const ClearBarCode = () => {
    barCode = '';
    lastTime = 0;
  };

  window.addEventListener('keypress', (e) => {
    // 排除输入框焦点，避免干扰用户正常输入
    const activeElement = document.activeElement;
    if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') return;

    const currCode = e.keyCode || e.which || e.charCode;
    const currTime = new Date().getTime();

    if (currCode === 13) {
      // 回车键处理（扫码枪通常以回车键结束输入）
      if (barCode.length >= 16) {
        const parts = barCode.split(/\s+/); // 按空格分割扫码内容
        const middleValue = parts[1]?.toLowerCase().replace(/^af/, '') || ''; // 提取中间部分并去除前缀
        if (middleValue) {
          scannedBarcode.value = middleValue; // 更新扫码结果
        } else {
          ElMessage.error('请扫描正确的二维码'); // 错误提示
        }
      }
      ClearBarCode(); // 清空缓存数据
    } else {
      // 非回车键处理（收集扫码内容）
      if (lastTime === 0 || currTime - lastTime <= 80) {
        barCode += String.fromCharCode(currCode); // 将字符码转换为字符串
        lastTime = currTime; // 更新最后输入时间
      } else {
        ClearBarCode(); // 超时清空数据
      }
    }
  });
};

// 在组件挂载时启动扫码枪监听
onMounted(() => {
  eventListenerScanCode();
});
</script>

<template>
  <div>
    <h3>扫码结果：</h3>
    <p>{{ scannedBarcode }}</p>
  </div>
</template>

---

功能详解

1. 扫码枪输入监听

扫码枪在扫描二维码后，会模拟键盘输入，将二维码内容逐字符输入到系统中，并以回车键（keyCode === 13）作为结束标志 。通过监听 keypress 事件，我们可以捕获这些输入并将其拼接成完整的二维码内容。

关键点：

• 排除输入框焦点：为了避免干扰用户在输入框中的正常操作，当 document.activeElement 是 <input> 或 <textarea> 时，直接跳过监听。
• 时间间隔判断：扫码枪的输入速度非常快，通常每个字符之间的间隔小于 80 毫秒。如果当前输入与上一次输入的时间间隔超过 80 毫秒，则认为是无效输入，清空缓存数据 。

2. 二维码内容解析

扫码枪返回的数据格式可能包含多余的信息（如前后缀或分隔符）。我们可以通过字符串操作（如 split 和 replace）提取有效内容。

示例：

假设扫码枪返回的数据为 AF12345678901234，我们可以通过以下步骤提取有效部分：

1. 按空格分割字符串。
2. 提取第二个部分（parts[1]）。
3. 去除前缀（如 AF）。

3. 错误处理

如果扫码结果不符合预期（如长度不足或无法提取有效内容），通过 ElMessage.error 提示用户重新扫描。

---

使用场景

该代码适用于需要通过扫码枪快速读取二维码内容的场景，例如：

• 仓库管理：通过扫码枪快速录入商品条码。
• 门禁系统：通过扫描二维码验证用户身份。
• 物流追踪：扫描包裹上的二维码记录物流信息。

---