web实现usb扫码枪读取二维码数据功能 - ToB企服应用市场:ToB评测及商务社交产业平台

<input id="input"/>

复制代码

<script>
const input= document.getElementById('input');
input.addEventListener('keydown',e=>{
if(e.keyCode==13){//回车结束
let qrcodeData=input.value;
console.log(`二维码数据为${qrcodeData}`)
}
})
input.focus()//聚焦
</script>

复制代码

import { nextTick, onMounted } from "vue";
import { ElLoading, ElMessage } from "element-plus";
let isInputing = false; //是否在输入中
/**
*
* @param {*} inputRef:输入框Ref
* @param {*} callBack :识别回调
* @returns
*/
const useScancer = (inputRef, callBack) => {
let interval = null; //定时器实例
let loading = null; //ElLoading组件实例
//输入框绑定keydown事件
const addKeydownEvent = () => {
if (inputRef?.value) {
inputRef.value.addEventListener("keydown", (event) => {
isInputing = true;
let keyCode = event.keyCode || event.which;
if (keyCode === 13) {
let qrcodeData = inputRef?.value?.value ?? ""; //二维码数据
if (interval) {
clearInterval(interval);
interval = null;
}
callBack(qrcodeData);
inputRef.value.value = "";
loading && loading.close();
loading = null;
ElMessage.success("识别成功");
isInputing = false;
}
});
}
};
//自动聚焦
const autoFocus = () => {
//立即执行
inputFocus();
if (!interval) {
//每50ms自动对焦
interval = setInterval(() => {
inputFocus();
}, 50);
}
};
//input聚焦
const inputFocus = () => {
if (inputRef && inputRef.value) {
inputRef.value.focus();
}
};
//开始扫码
const handleScanCode = () => {
if (!loading) {
console.log('loading')
loading = ElLoading.service({
lock: true,
text: "请开始扫码识别",
background: "rgba(255, 255, 255, 0.7)",
});
//20秒内未扫码关闭loading
setTimeout(() => {
if (!isInputing) {
loading && loading.close();
loading = null;
if (interval) {
clearInterval(interval);
interval = null;
}
}
}, 20 * 1000);
nextTick(() => {
autoFocus();
});
}
};
//初始化绑定事件
onMounted(() => {
addKeydownEvent();
});
return { autoFocus, handleScanCode };
};
export default useScancer;

复制代码

<template>
<input class="input" ref="inputRef" type="password"/>
<el-button @click.native="handleScanCode" type="primary">扫码识别</el-button>
<el-form :model="formData" style="margin-top: 20px">
<el-form-item label="姓名">
<el-input disabled v-model="formData.name" />
</el-form-item>
<el-form-item label="年龄">
<el-input disabled v-model="formData.age" />
</el-form-item>
<el-form-item label="生日">
<el-input disabled v-model="formData.birthday" />
</el-form-item>
</el-form>
</template>
<script setup>
import { ref, reactive } from "vue";
import useScancer from "./scanner.js"; //扫码识别hook
//表单数据
const formData = reactive({
name: "",
age: "",
birthday: "",
});
//输入框
const inputRef = ref();
//扫码回调
const { handleScanCode } = useScancer(inputRef, (data) => {
console.log(data, "二维码数据为：data");
if (data) {
try {
//二维码字符串转为json对象
data= JSON.parse(data);
for(let key in formData){
formData[key]=data[key]??'';
}
} catch (e) {
console.log(e,'e')
}
}
});
</script>
<style scoped>
.input {
position: fixed;
left: 0;
transform: translateX(-200%);
}
</style>

复制代码