vue 实现PDA设备扫描二维码及条码功能
页面效果图:实现具体功能:按下PDA设备的扫描键,扫描成功后将扫描到的编码值自动填充到输入框内,点击确定按钮将编码通过接口传递到后端代码如下:<template><div><input class="input" ref="searchInput" v-model="codeValue" placeholder="请输入条形码"/><div class="
·
页面效果图:
实现具体功能:
按下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) { // IE
this.nextCode = e.keyCode
} else if (e.which) { // Netscape/Firefox/Opera
this.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.key
console.log('扫码开始---', this.code)
}
if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
this.code = e.key
console.log('防止首字缺失。。。', this.code)
} else if (this.lastCode && this.lastTime) {
this.code += e.key
console.log('扫码中。。。', this.code)
}
this.lastCode = this.nextCode
this.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>
至此完成!测试有效!感谢支持!!!
更多推荐
已为社区贡献42条内容
所有评论(0)