vue 实现PDA设备扫描二维码及条码功能

页面效果图：

实现具体功能：

按下PDA设备的扫描键，扫描成功后将扫描到的编码值自动填充到输入框内，点击确定按钮将编码通过接口传递到后端

代码如下：

<template><div><input class="input" ref="searchInput" v-model="codeValue" placeholder="请输入条形码"/><div class="btn"><button @click="submitBtn()">确定</button></div></div>
</template>

执行方法如下：

接口请求需要安装axios，安装命令如下：

npm install axios

<script>
import axios from 'axios'
export default {data() {return {codeValue: '',code: '',lastTime: '',nextTime: '',lastCode: '',nextCode: '',dtmainId: ''}},created() {// 自动获取input输入框焦点this.$nextTick( () => {this.$refs.searchInput.focus();})// 模拟用户按下键盘按钮事件，触发扫描方法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},// 提交数据submitBtn(){// 发送网络请求let that = this;axios.get('http://xx.xx.xx.xx:8080/receive/emergency?receiveNo=' + this.codeValue).then(function (response) {console.log(response);alert('提交成功！')that.codeValue = ''}).catch(function (error) {console.log(error);alert('提交失败！')that.codeValue = ''});}}
}
</script>

样式如下：

<style>.input{height: 30px;}.btn{margin-top: 15px;}.btn button{width: 50px;height: 30px;background-color: #409EFF;color: #fff;border: none;border-radius: 4px;}
</style>

至此完成！测试有效！感谢支持！！！

vue 实现PDA设备扫描二维码及条码功能相关推荐

关于扫描二维码下载app功能实现方法
关于扫描二维码下载app功能实现方法功能实现思路: Androidapk的下载本质上就是文件的下载,所以我们只需要在后台提供一个下载的方法,就能是实现apk的下载. 在实现后台代码以后,我们生成 ...
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的腾讯网(www.qq.com)有一个扫码登录功能很有意思, 点击首页一键登录按钮,就会展现一个二维码,用手机qq扫描此二维码就可以使当 ...
vue实现调用摄像头扫描二维码
安装依赖:vue-qrcode-reader npm install vue-qrcode-reader -s 直接上代码 <template><div><div cla ...
vue websocket 公众号扫描二维码登录PC端
首先使用的是websocket进行消息的传递,当我们在pc端请求到二维码图片后,打开微信扫一扫,扫描二维码后,就可以在websocket里接收到扫描消息,然后进行自己的业务逻辑处理,具体代码如下: w ...
实用知识：实现扫描二维码和条形码功能
#import "ViewController.h"// 捕获摄像头数据需要该框架 #import <AVFoundation/AVFoundation.h>@inte ...
微信小程序扫描二维码或者条码
程序是需要扫描条形码然后跳转到对应的产品信息页,其实微信小程序就有一个扫码识别的API,下面一起来看看: wx.scanCode(Object object) 调起客户端扫码界面进行扫码. 示例代码: ...
通过libusb操作usb设备扫描二维码
libusb是开源的操作usb设备的类库,可以在Windows, linux, android使用. 以下代码是参照libusb官方网站提供的api文档和example开发的操作二维码扫描头设备的例子 ...
Vue 实现调用相机扫描二维码或条形码
扫条形码: 扫二维码: zxing 下载: npm install @zxing/library --save 扫码组件内容: <template><div><video ...
怎么让微信的扫一扫扫描二维码后安装apk 苹果手机下载APP怎样扫描二维码实现下载功能
二维码深入人心,很多App都在官网挂出了可以扫描下载apk的二维码,笔者所在公司的产品也不例外.一般二维码编码的URL不会直接放apk而是放中间地址,通过这个中间地址再跳转到apk所在URL,原因大概 ...

vue 实现PDA设备扫描二维码及条码功能

vue 实现PDA设备扫描二维码及条码功能相关推荐

最新文章

热门文章