[绍棠] vue 扫码枪读取条形码数据

扫码枪是模拟的键盘输入，所以用键盘事件window.document.onkeypress = function(e){ }.

在vue项目中，可以在created/mounted中做

代码如下

<template><input  v-model="codeValue" placeholder="请输入条形码"/>
</template><script>
export default {data() {return {codeValue: '',code: '',lastTime: '',nextTime: '',lastCode: '',nextCode: '',dtmainId: ''}},created() {window.document.onkeypress = (e) => {if (window.event) { // IEthis.nextCode = e.keyCode} else if (e.which) { // Netscape/Firefox/Operathis.nextCode = e.which}if (e.which === 13) { // 键盘回车事件if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效console.log('扫码结束。')console.log('条形码：', this.code)this.parseQRCode(this.code) // 获取到扫码枪输入的内容，做别的操作this.lastCode = ''this.lastTime = ''return}this.nextTime = new Date().getTime()if (!this.lastTime && !this.lastCode) {this.code = '' // 清空上次的条形码this.code += e.keyconsole.log('扫码开始---', this.code)}if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失this.code = e.keyconsole.log('防止首字缺失。。。', this.code)} else if (this.lastCode && this.lastTime) {this.code += e.keyconsole.log('扫码中。。。', this.code)}this.lastCode = this.nextCodethis.lastTime = this.nextTime}},methods: {parseQRCode(code) {if (code.length === 13) {// 处理自己的逻辑this.$emit('barCode', code) //通知父组件} else if (code.length === 23) {console.log('B类条码:' + code)} else if (code.length === 0) {console.log('请输入条码！')} else {alert('条码不合法：' + code)}this.codeValue = code// 发送网络请求}}
}
</script>

[绍棠] vue 扫码枪读取条形码数据相关推荐

vue下实现扫描枪读取条形码数据
扫描枪模拟的是键盘输入事件,所以我们可以监听键盘按下事件(window.document.onkeypress)来实现相关需求. 可以在created/mounted中添加事件. 具体方法: // 监 ...
041：vue+openlayers读取WKT数据，输出GML、Polyline、GeoJSON（代码示例）
第041个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中读取WKT的geometry数据,并输出GML,Polyline,GeoJSON的Geometry. 直接复制下 ...
030：vue+openlayers读取WKB数据（示例代码）
第030个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中读取WKB的数据,并显示图形. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果: ...
[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结
this.$nextTick()原理: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中 ...
[绍棠] Vue六种传值方式
前言: 六种传值方式为: 属性传值 $refs $parent 通知传值(广播传值) 本地传值路由传值在介绍组件传值之前先明确三种组件关系:父子组件.兄弟组件.无关系组件上图关系基于:A.B组件 ...
[绍棠] Vue解决V-HTML指令潜在的XSS攻击（‘v-html‘ directive can lead to XSS attack.）
什么是 XSS 攻击? XSS是跨站脚本攻击(Cross-Site Scripting)的简称. XSS是一种注入脚本式攻击,攻击者利用如提交表单.发布评论等方式将事先准备好的恶意脚本注入到那些良性可 ...
[绍棠] vue跳转的两种方法
1 标签跳转 <router-link to="/recommend"><button class="button">点击跳转</ ...
vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
pHp封装成vue,vue.js生成条形码的方法
本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家. 1.下载插件npm install @xkeshi/vue-barcode //下载条形码插件 2.在m ...

[绍棠] vue 扫码枪读取条形码数据

[绍棠] vue 扫码枪读取条形码数据相关推荐

最新文章

热门文章