如何在vue3+ts项目中实现zebra扫描枪扫码效果

1实现一个hooks

import { onMounted, onUnmounted, ref } from 'vue' interface ScanOptions { threshold?: number minLength?: number onScanProgress?: (buffer: string) => void onScanSuccess: (code: string) => void } export function useScanGun(options: ScanOptions) { const { threshold = 100, minLength = 6, onScanProgress, onScanSuccess } = options const codeBuffer = ref('') const lastScanned = ref('') let lastTime = 0 let timer: ReturnType<typeof setTimeout> | null = null const commit = (preventDefaultEvent?: KeyboardEvent) => { const value = codeBuffer.value if (value.length >= minLength) { lastScanned.value = value onScanSuccess(value) if (preventDefaultEvent) preventDefaultEvent.preventDefault() } codeBuffer.value = '' lastTime = 0 } const handleKeyDown = (event: KeyboardEvent) => { const currentTime = Date.now() if (timer !== null) { clearTimeout(timer) timer = null } if (event.metaKey || event.ctrlKey || event.altKey) return const limit = event.key === 'Enter' ? threshold * 2 : threshold if (lastTime !== 0 && currentTime - lastTime > limit) { codeBuffer.value = '' } if (event.key === 'Enter') { commit(event) return } if (event.key.length === 1) { codeBuffer.value += event.key onScanProgress?.(codeBuffer.value) } lastTime = currentTime timer = setTimeout(() => { commit() }, threshold * 2) } onMounted(() => { window.addEventListener('keydown', handleKeyDown, true) }) onUnmounted(() => { if (timer !== null) { clearTimeout(timer) timer = null } window.removeEventListener('keydown', handleKeyDown, true) }) return { codeBuffer, lastScanned } }

2 在app.vue中全局监听扫码的结果

<script setup lang="ts"> import zhCn from 'element-plus/es/locale/lang/zh-cn' import { onMounted, ref } from 'vue' import { recordProgress, signRegister } from '@/apis' import { useScanGun } from '@/hooks/useScan' const SCANNER_PREFIXES = ['A|', 'B|', 'C|', 'D|', 'E|', 'F|'] as const type ScannerPrefix = (typeof SCANNER_PREFIXES)[number] const parseScannerPayload = (raw: string): { prefix: ScannerPrefix; payload: string } | null => { const text = String(raw ?? '').trim() if (!text) return null for (const prefix of SCANNER_PREFIXES) { if (text.startsWith(prefix)) return { prefix, payload: text.slice(prefix.length) } } return null } const code = ref('') useScanGun({ threshold: 200, onScanProgress: (buffer) => { console.log('codeBuffer', buffer) }, onScanSuccess: (result) => { console.log('app---扫码成功：', result) const parsed = parseScannerPayload(result) const rawPayload = (parsed?.payload ?? result).trim() if (!rawPayload) return const rawParts = rawPayload.split('-') const orderNo = rawParts[0]?.trim() || '' const cardNo = rawParts.length >= 2 ? rawParts.slice(1).join('-').trim() : '' const inputValue = cardNo || rawPayload code.value = inputValue window.dispatchEvent( new CustomEvent('global-scan', { detail: { raw: result, prefix: parsed?.prefix, rawPayload, orderNo, cardNo, payload: inputValue } }) ) const active = document.activeElement if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) { active.value = inputValue active.dispatchEvent(new Event('input', { bubbles: true })) } //工位一：扫码只得到客户邮寄的订单信息 if (parsed?.prefix === 'A|') { signRegister({ logisticsNo: orderNo || rawPayload }) .then((res) => console.log('signRegister success:', res)) .catch((err) => console.error('signRegister error:', err)) return } //其他工位单独区分... if (parsed) { recordProgress({ orderNo: orderNo || rawPayload, cardNos: cardNo ? [cardNo] : [] }) .then((res) => console.log('recordProgress success:', res)) .catch((err) => console.error('recordProgress error:', err)) } } }) onMounted(() => { console.log('扫码枪已就绪') }) </script> <template> <el-config-provider :locale="zhCn"> <router-view></router-view> </el-config-provider> </template> <style scoped></style>

注意，这里 const SCANNER_PREFIXES = ['A|', 'B|', 'C|', 'D|', 'E|', 'F|'] as const的目的是为了区分不同的扫描枪。扫描枪扫码以后得到的数据前会出现A|xxxx,B|xxxxx等。这是通过scan123这个软件设置的。比如扫描枪一设置返回的数据前缀为A|，那么扫描枪1最后通过扫码的结果就是A|XXX,,扫描枪二同理...这时我们在代码里就可以区分不同的扫描枪。让他们去做不同的业务逻辑

const active = document.activeElement if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) { active.value = inputValue active.dispatchEvent(new Event('input', { bubbles: true })) }

这里的代码是当用户关闭定位在输入框时，可以自动填充扫码枪的结果