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是或