当前位置：首页 > news >正文

Vue3 完美对接硬件扫码枪：onscan.js 实战与并发队列处理

news 2026/4/14 21:32:45

Vue3 实战：onscan.js 全方位教程

1. 安装与引入

首先，把这个轻量级的库拉进你的 Vue3 项目：

npm install onscan.js

2. Vue3 核心代码实现

在 Vue3 的组合式 API（Setup）中，我们需要在onMounted时挂载监听，在onUnmounted时及时卸载（非常关键，否则会导致内存泄漏和重复触发）。

JavaScript

<script setup> import { onMounted, onUnmounted, ref } from 'vue'; import onScan from 'onscan.js'; const scanResult = ref(''); const scanHistory = ref([]); // 记录扫描历史 // 业务逻辑处理 const handleScan = (sCode, iQuantity) => { console.log('扫码枪传回原始数据:', sCode); // 这里执行你的逻辑，比如根据 Code 调后端 API 查库存 scanResult.value = sCode; scanHistory.value.unshift({ code: sCode, time: new Date().toLocaleTimeString() }); }; onMounted(() => { // 将插件绑定到 document 全局 onScan.attachTo(document, { suffixKeyCodes: [13], // 必填：扫码枪通常以回车（KeyCode 13）结尾 reactToPaste: true, // 支持直接粘贴模拟扫码 avgTimeByChar: 40, // 字符平均输入间隔，用来区分人手录入和机器扫码 minLength: 3, // 扫码结果的最小长度 onScan: (sCode, iQuantity) => { handleScan(sCode, iQuantity); }, onKeyDetect: (iKeyCode, e) => { // 这里可以监听按键，比如屏蔽扫码时的某些干扰按键 console.log('检测到按键:', iKeyCode); }, onScanError: (oDebug) => { console.error('扫码解析异常:', oDebug); } }); }); onUnmounted(() => { // 组件卸载时，一定要解除绑定！ onScan.detachFrom(document); }); </script>

3. 深度解析：连续扫码与防抖处理

老弟你提到的**“连续点击、连续扫码”**是实战中最头疼的问题。扫码枪太快，如果你的handleScan里面有异步请求（调接口），接口还没回，第二扫又来了，会导致数据错乱或 Loading 满天飞。

❌ 为什么不能用常规的`debounce`（防抖）？

普通的防抖是“单位时间内只执行最后一次”。但扫码不一样，用户连续扫 10 个不同的商品，你不能只给我处理最后一个！

✅ 解决方案：异步请求队列 (Async Queue)

我们要确保：扫码动作是瞬间捕获的，但业务处理是排队进行的。

// 定义一个简单的请求队列锁 let isProcessing = false; const scanQueue = []; const processQueue = async () => { if (isProcessing || scanQueue.length === 0) return; isProcessing = true; const currentCode = scanQueue.shift(); // 取出队列第一个 try { console.log(`正在处理: ${currentCode}`); // 模拟 API 请求 await axios.post('/api/check-item', { code: currentCode }); console.log(`处理完成: ${currentCode}`); } catch (err) { console.error('处理失败'); } finally { isProcessing = false; processQueue(); // 递归调用，处理下一个 } }; // 修改插件的回调 onScan: (sCode) => { scanQueue.push(sCode); // 只要扫了，先塞进队列 processQueue(); // 触发队列处理 }

输入法状态：致命细节！如果用户电脑处于“中文输入法”状态，扫码枪扫出的123可能会变成中文。建议设置扫码枪为“大写锁定模式传输”或者在代码中拦截keydown强制转换。
焦点抢占：onscan.js绑定到document虽然很爽，但如果页面上有其他 Input 框，扫码时数据会同时进入 Input 框和插件回调。记得在插件配置里处理是否需要e.preventDefault()。
硬件配置：不同品牌的扫码枪默认后缀不同。有的带回车（CR），有的带换行（LF）。一定要让开发者先用记事本测试一下扫码枪到底带不带回车。