首页 > 其他分享 >vue2实现监听usb接口的扫码器,获取扫码数据。

vue2实现监听usb接口的扫码器,获取扫码数据。

时间:2024-09-20 17:48:06浏览次数:8  
标签:扫码 usb start 码器 callback result ._ var

原理
扫码枪本质就是一个快速输入+回车(注意:扫码输入法要设置英文,不然会乱码)

全局安装

import scanner from './install';
Vue.use(scanner);

使用
export default {
data () {
return {
items:[], //扫码结果
isStart:false //是否开启扫码
}
},
mounted(){
this.startScannerHandler();
},
methods:{
startScannerHandler(){
if(!this.isStart){
this._scanner=this.$scanner({callback:v=>{
this.items.push(v);
}});
}else{
this._scanner.cancel();
}
this.isStart=!this.isStart;
}
}
}

创建install.js
export default {
install(Vue) {
Vue.prototype.$scanner = function (options) {
var _this = this;
if (_this._callback) {
return;
}
var opt = Object.assign({
delay: 1000, // 时间太短会还没输入完成,根据测试情况修改
endChar: 'Enter',
callback: null
}, options)
var fn = {
cancel: function () {
if (_this._callback)
document.documentElement.removeEventListener('keypress', _this._callback);
delete _this._callback;
}
};
_this._callback = function (e) {
var result = _this._result || '';
var _start = _this._start || new Date();
var now = new Date();
if ((now.getTime() - _start.getTime()) > opt.delay) {
_start = now;
result = '';
}
var keyVal = `${String.fromCharCode(e.which)}`;
if (e.key == opt.endChar) {
_this._result = '';
opt.callback && opt.callback(result);
return;
}
result += keyVal;
_this._result = result;
_this._start = _start;
};
document.documentElement.addEventListener('keypress', _this._callback);
return fn;
};
}
};
————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/DacingCode/article/details/138714788

标签:扫码,usb,start,码器,callback,result,._,var
From: https://www.cnblogs.com/dongfangzhaoyue/p/18422948

相关文章

  • uniapp精仿支付宝UI界面,首页/理财/消息/生活/口碑/我的,还有模拟支付宝扫码支付/收付款
    uniapp精仿支付宝UI界面,首页/理财/消息/生活/口碑/我的,还有模拟支付宝扫码支付/收付款等功能,界面漂亮颜值高,视频商城小工具等,蚂蚁森林种树养鸡农场偷菜样样齐用于视频,商城,直播,聊天等sumer-alipay介绍uniapp精仿支付宝UI界面,首页/理财/消息/生活/口碑/我的,还有模拟支付宝......
  • 【深度学习】Transformer掌握文本嵌入层和位置编码的实现过程,解码器中各个组成部分的
    1输入部分介绍输入部分包含:源文本嵌入层及其位置编码器目标文本嵌入层及其位置编码器 2文本嵌入层的作用 无论是源文本嵌入还是目标文本嵌入,都是为了将文本中词汇的数字表示转变为向量表示,希望在这样的高维空间捕捉词汇间的关系.文本嵌入层的代码分析:#导入必......
  • 同三维T80001EH8 8路高清HDMI编码器:高清HDMI编码器
    同三维T80001EH88路高清HDMI编码器8路HDMI输入+8路3.5音频输入,4路4K30+4路高清1080P60,两个网口,带两个小液晶屏【产品型号】T80001EH8同三维T80001EH88路高清HDMI编码器【系列介绍】8路HDMI高清编码器是专业的高清音视频编码产品,只需要占用较小的带宽,即可获得高清晰......
  • 同三维T80001EH4 4路高清HDMI视频编码器:高清HDMI编码器
    同三维T80001EH44路高清HDMI视频编码器4路HDMI输入+4路3.5音频输入,支持2路4K30和2路高清1080P60,带小液晶屏,POE供电可选【产品型号】T80001EH4同三维T80001EH44路高清HDMI视频编码器【系列介绍】4路HDMI高清编码器是专业的高清音视频编码产品,只需要占用较小的带宽,......
  • uni-app在微信小程序、H5 和 App 中实现扫码功能
    在uni-app中实现扫码功能,可以通过调用不同平台提供的扫码API来实现。下面分别介绍在微信小程序、H5和App中如何实现扫码功能。1.微信小程序在微信小程序中,你可以使用wx.scanCode接口来实现扫码功能。示例代码在你的.wxml文件中,添加一个按钮:<buttonbindtap......
  • 机器翻译之创建Seq2Seq的编码器、解码器
    1.创建编码器、解码器的基类1.1创建编码器的基类fromtorchimportnn#构建编码器的基类classEncoder(nn.Module):#继承父类nn.Moduledef__init__(self,**kwargs):#**kwargs:不定常的关键字参数super().__init__(**kwargs)defforwa......
  • 如何将扫码提交的数据直接推送到企业微信、钉钉、飞书群聊?详细教程
    功能介绍在草料制作的表单中,填表人扫码填写并提交数据后,这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中,实现即时共享和沟通,提升团队协作效率。设置教程企业微信钉钉飞书......
  • 免弹窗、预授权,默认界面扫码能力打造系统级扫码体验
    二维码如今是移动应用流量入口以及功能实现的重要工具,也是各App的流量入口,使用场景愈加丰富,广泛应用于支付、出行、餐饮、生活服务、智慧生活、零售及广告营销等主流场景。然而,在实际生活中,扫码环境如光照强度、扫码角度、距离等,相机功能如缩放、对焦、曝光等和码图本身完整程度......
  • imx6ull如何使用configfs使能usb gadget中的usbnet功能
    要在 i.MX6ULL 平台上使用 configfs 使能 USBGadget 中的 usbnet 功能,可以按照以下步骤进行配置。以下步骤假设您已经在设备上运行了嵌入式Linux系统,并且具有root权限。1.确认内核配置在编译内核时,需要确保以下配置项被启用:CONFIG_USB_GADGET=yCONFIG_USB_GADGET_C......
  • CMS32L051使用旋转编码器
    文章目录概要代码小结概要CMS32L051使用外部中断的方式识别旋转编码器的方向。选取其中一个信号A进行外部中断触发,由于信号A空闲时处于高电平,因此初始化时外部中断使用下降沿触发;触发第一个下降沿后,判断当前是否已经触发了上升沿,如果已经触发上升沿,则需要判断当前......