vue 扫码枪获取条形码逻辑

直接贴代码

<template>
    <div class="demo-container">
        <el-input 
            onkeyup="value=value.replace(/\D|/g,'')"
            v-model="codeValue" 
            ref="codeInputElem" 
            placeholder="使用扫码枪前，请保持此输入框在聚焦状态" 
            clearable
        >
        </el-input>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus'
export default {
    name: "Basic",
    setup() {
        const state = reactive({
            codeInputElem: null,  //输入框元素实例

            codeValue: "",  //输入框绑定值
            instantCode: "",  //实时的值
            lastTime: "",
            nextTime: "",
            lastCode: "",
            nextCode: ""
        })

        onMounted(()=>{
            getFocus()  //帮助用户自动聚焦
            window.onkeypress = (e) => {
                watchKeyPress(e)
            }
        })
        onBeforeUnmount(()=>{
            window.onkeypress = null //页面卸载时需要解除监听
        })

        // 输入框聚焦
        function getFocus(){
            state.codeInputElem.focus()
        }

        //监听键盘按下事件（包括扫码枪触发的事件）并进行处理
        function watchKeyPress(e){
            if (window.event) {  // IE
                state.nextCode = e.keyCode;
            } else if (e.which) {  // Netscape/Firefox/Opera
                state.nextCode = e.which;
            }
            if (e.which === 13) { // 键盘回车事件
                if (state.instantCode.length < 3) return; // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
                // console.log("扫码结束。");
                // console.log("条形码：", state.instantCode);
                parseQRCode(state.instantCode); // 获取到扫码枪输入的内容，做别的操作
                state.lastCode = "";
                state.lastTime = "";
                return;
            }
            state.nextTime = new Date().getTime();
            if (!state.lastTime && !state.lastCode) {
                state.instantCode = ""; // 清空上次的条形码
                state.instantCode += e.key;
                // console.log("扫码开始---", state.instantCode);
            }
            if (state.lastCode&&state.lastTime&&state.nextTime-state.lastTime>500) {  // 当扫码前有keypress事件时,防止首字缺失
                state.instantCode = e.key;
                // console.log("防止首字缺失。。。", state.instantCode);
            } else if (state.lastCode && state.lastTime) {
                state.instantCode += e.key;
                // console.log("扫码中。。。", state.instantCode);
            }
            state.lastCode = state.nextCode;
            state.lastTime = state.nextTime;
        }
        function parseQRCode(code) {
            if (code.length === 0) {
                ElMessage.warning("条形码不能为空，请重试");
                return
            }else if(code.length > 16){
                ElMessage.warning("条形码格式不正确，请重试");
                return
            }

            state.codeValue = code;
            checkCode()  // 这里可发送网络请求
        }

        // 调取接口验证条形码
        function checkCode(){
            //......
        }

        return {
            ...toRefs(state)
        }
    },
};
</script>

<style scoped lang="less">
.demo-container {
    
}
</style>