扫码枪读取条形码数据(vue)

扫码枪是模拟键盘输入的,所有事件为document.onkeypress = function(){}.

在vue项目中,是没有window.onload的,所以在created钩子函数中做:

var b = "";
    var _this = this;
    document.onkeydown = function() {
      if (event.keyCode != 13) {
        var bizCode = String.fromCharCode(event.keyCode);
        if (event.keyCode >= 48 && event.keyCode <= 122) {
          b = b + bizCode;
        }
      } else {
        b = "";
      }
      _this.msg = b;
    };

在document.onkeydown中获取了条码的值,此时的值是,6,65,657,6579,65794,657943,6579435...按照按键依次展示出来的。

如果需要条码值与页面中其他值一起做数据处理,则需要监听;

在watch中,需要了解一下immediate和handler.如果在最初绑定某值时就需要执行函数,就需要用到immediate属性。

 1 watch:{
 2   msg:{
 3   handler(oldValue, newValue){
 4     //由于此时扫描出的值是一个字符一个字符累加的,所有用一个数组装起来。
 5 var arry = []
 6 arry.push(this.msg)
 7 for(var i = 0; i < arry.length; i++){
 8   //...做判断,调接口什么的,随业务逻辑写了  
 9 }
10 }  
11 },
12 immediate: true      
13 }

还有一点,就是多次扫码会产生叠加,在document.onkeydown的最下方将msg清空即可。

转载于:https://www.cnblogs.com/lesliejavascript/p/11459745.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值