vue使用扫码枪扫描二维码获取数据

扫码枪原理

扫码枪本质是键盘按键输入，在结束时触发回车事件，即可以通过监听键盘输入获取扫码枪扫描到的数据并监听回车事件判断是否结束。

在此只使用触发键盘事件这一方法

1.扫码枪读取数据会触发键盘事件，通过监听keydown事件获取数据
2.在页面挂载后开始监听keydown事件，并在页面销毁后将此事件移除
3.扫码枪扫描时会连续触发并获取到扫描到的数据
3.数据读取完成之后会触发enter键，判断结束

基础代码

keyDownListener(e){
    let code = '';
    if(e.keyCode != 13 || e.key != 'Enter'){
    // 扫描未结束（正在扫描），正在获取数据（单个字符）
        code +=e.key
    } else {
    // 扫描结束，可获取到完整数据并进行别的操作
        
    }
}

详细代码（优化代码）

keyDownListener(e){
    let code = '';
    let codeArr = [];
    let lastTime,nextTime = ''
    let lastCode,nextCode = ''
    if(window.event){
    // IE
    nextCode = e.key;
    } else if(e.which){
    // Netscape/Firefox/Opera
    nextCode = e.which;
    }
    
    // 当前触发时间
    nextTime = new Date().getTime();
    // 第一次获取
    if(!lastTime &&  !lastCode){
    codeArr = []
    codeArr.push(e.key)
    }
    
    if(lastCode && lastTime && nextTime - lastTime > 30){
    // 相隔时间大于30 说明不是扫码枪扫描的 清空重新
    codeArr = []
    // 当扫码前有keypress事件时,防止首字缺失
    codeArr.push(e.key)
    } else if(lastCode  && lastTime){
    codeArr.push(e.key)
    }
    lastCode = nextCode
    lastTime = nextTime
    // 扫描结束
    if(e.keyCode == 13){
    // 可进行下一步操作
    /* 下一步操作 */
    lastTime = ''
    nextTime = ''
    }
}