优化扫码枪监听，可用按钮监听扫码枪。~

resources/admin/src/main.js

@@ -8,8 +8,15 @@ import router from './router'
 import store from './store'
 import App from './App.vue'
 
+
+import BarcodeScanner from '@/utils/barcode-scanner';
+
+
 const app = createApp(App);
 
+//扫码组件
+app.use(BarcodeScanner);
+
 app.use(i18n);
 app.use(store);
 app.use(router);

resources/admin/src/utils/BarcodeScanner.js

+class BarcodeScanner {
+    constructor(options = {}) {
+        this.options = {
+            endChar: 'Enter', // 默认结束符为回车
+            minLength: 3,     // 最小条码长度
+            timeout: 100,     // 输入超时（毫秒）
+            ...options
+        };
+        this.barcode = '';
+        this.timer = null;
+        this.init();
+
+        this.handleKeyDown = this.handleKeyDown.bind(this); // 固定this指向
+    }
+
+    init() {
+        // document.addEventListener('keydown', this.handleKeyDown.bind(this));
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+
+    handleKeyDown(event) {
+        // 忽略组合键和结束符之前的处理
+        if (event.ctrlKey || event.altKey || event.metaKey || event.keyCode === 229) return;
+
+        const { key } = event;
+
+        // 检测到结束符
+        if (key === this.options.endChar) {
+            event.preventDefault(); // 阻止默认回车行为
+            if (this.barcode.length >= this.options.minLength) {
+                this.processBarcode(this.barcode);
+            }
+            this.reset();
+            return;
+        }
+
+        // 处理有效字符
+        if (key.length === 1 && !event.repeat) {
+            this.barcode += key;
+            this.resetTimer();
+        }
+    }
+
+    resetTimer() {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+            if (this.barcode.length >= this.options.minLength) {
+                this.processBarcode(this.barcode);
+            }
+            this.reset();
+        }, this.options.timeout);
+    }
+
+    
+
+    reset() {
+        this.barcode = '';
+        clearTimeout(this.timer);
+    }
+
+    processBarcode(barcode) {
+        console.log('Scanned barcode:', barcode);
+        // 触发自定义事件或回调函数
+        const event = new CustomEvent('barcodeScanned', { detail: barcode });
+        document.dispatchEvent(event);
+    }
+
+    // 保持之前的类实现，但增加销毁方法
+    destroy() {
+        // document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+}
+export default BarcodeScanner
+
+/*
+// 使用示例
+const scanner = new BarcodeScanner();
+
+// 监听扫描事件
+document.addEventListener('barcodeScanned', (e) => {
+    console.log('Received barcode:', e.detail);
+});
+*/
+
+//本代码为1.0 版本
\ No newline at end of file

resources/admin/src/utils/barcode-scanner.js

+let scannerInstance = null;
+
+export default {
+    install(app) {
+        const createScanner = () => {
+            class BarcodeScanner {
+                constructor(options = {}) {
+                    // 先绑定事件处理器！！！
+                    this.handleKeyDown = this.handleKeyDown.bind(this);
+
+                    // 初始化配置
+                    this.options = {
+                        endChar: 'Enter',
+                        minLength: 3,
+                        timeout: 100,
+                        ...options
+                    };
+                    
+                    // 状态初始化
+                    this.barcode = '';
+                    this.timer = null;
+                    
+                    // 启动监听
+                    this.init();
+                }
+
+                init() {
+                    // document.addEventListener('keydown', this.handleKeyDown);
+                    try {
+                        document.addEventListener('keydown', this.handleKeyDown);
+                    } catch (e) {
+                        console.error('条码扫描器初始化失败:', e);
+                    }
+                }
+
+                // 其他方法保持不变...
+                handleKeyDown(event) {
+                    if (event.ctrlKey || event.altKey || event.metaKey || event.keyCode === 229) return;
+
+                    const { key } = event;
+                    
+                    if (key === this.options.endChar) {
+                        event.preventDefault();
+                        if (this.barcode.length >= this.options.minLength) {
+                            this.processBarcode(this.barcode);
+                        }
+                        this.reset();
+                        return;
+                    }
+
+                    if (key.length === 1 && !event.repeat) {
+                        this.barcode += key;
+                        this.resetTimer();
+                    }
+                }
+
+                resetTimer() {
+                    clearTimeout(this.timer);
+                    this.timer = setTimeout(() => {
+                        if (this.barcode.length >= this.options.minLength) {
+                            this.processBarcode(this.barcode);
+                        }
+                        this.reset();
+                    }, this.options.timeout);
+                }
+
+                reset() {
+                    this.barcode = '';
+                    clearTimeout(this.timer);
+                }
+
+                processBarcode(barcode) {
+                    // 防重复触发（500ms内不处理相同条码）
+                    if (this.lastBarcode === barcode && Date.now() - this.lastScan < 500) return;
+                    this.lastBarcode = barcode;
+                    this.lastScan = Date.now();
+                    // 触发事件...
+
+                    const event = new CustomEvent('barcodeScanned', { detail: barcode });
+                    document.dispatchEvent(event);
+                }
+
+                destroy() {
+                    document.removeEventListener('keydown', this.handleKeyDown);
+                }
+            }
+            return new BarcodeScanner();
+        };
+
+        app.config.globalProperties.$barcodeScanner = {
+            init(options) {
+                if (!scannerInstance) {
+                    scannerInstance = createScanner(options);
+                }
+                return scannerInstance;
+            },
+            destroy() {
+                scannerInstance?.destroy();
+                scannerInstance = null;
+            }
+        };
+    }
+};
+
+//本代码为2.0 版本 在使用中
\ No newline at end of file