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

Vue3 实战onscan.js 全方位教程1. 安装与引入首先把这个轻量级的库拉进你的 Vue3 项目npm install onscan.js2. Vue3 核心代码实现在 Vue3 的组合式 APISetup中我们需要在onMounted时挂载监听在onUnmounted时及时卸载非常关键否则会导致内存泄漏和重复触发。JavaScriptscript 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); }); /script3. 深度解析连续扫码与防抖处理老弟你提到的**“连续点击、连续扫码”**是实战中最头疼的问题。扫码枪太快如果你的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。一定要让开发者先用记事本测试一下扫码枪到底带不带回车。