扫码枪（扫描枪）扫码在vue中的使用教学

已于 2023-06-18 14:54:50 修改
阅读量6.5k 收藏 43
点赞数
文章标签： vue.js 前端 javascript
于 2023-06-18 14:53:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yi2008yi/article/details/131271464
版权

1.扫描枪使用原理浅析。

扫描枪的使用原理其实很简单：就是把光信号转换成电信号，再将电信号通过模拟数字转换器转化为数字信号传输到计算机中处理。其实可以简单理解为：二维码/条形码 转换成 字符串。

2.扫描枪功能开发前准备。

正所谓“工欲善其事,必先利其器”，所以在准备开发此功能之前，我们得准备好两件事：

  • 扫描枪与主机的接入（扫描枪按接口分类通常有四种：SCSI接口、EPP接口、USB接口、无线接口（蓝牙通讯），本文均以USB接口扫描枪在vue项目中开发为例。）
  • 二维码/条形码（可用 草料官网 生成）。

3.扫描枪做了两件事。

  • 识别二维码/条形码的内容并填入input文本框中。
  • 自动执行键盘的回车事件。

4.核心代码与实例（单列）。

  • 图解（单列）：

  • 核心代码（单列）：
<el-table v-else :data="form.attrList" ref="newData" :height="tableHeight" key="pdlistbdk" border
                    tooltip-effect="dark" :header-cell-style="{ background: 'rgb(234,238,249)', color: '#333' }"
                    size="small">
                    <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
                    <el-table-column :label="item.titleName" :prop="'title' + i" align="center"
                        v-for="(item, i) in headData2" :key="i">
                        <template slot-scope="scope">
                            <el-input :placeholder="'请输入' + item.titleName" ref="rowIndex2"
                                v-model="scope.row[scope.column.property]" style="width: 100%" size="mini" clearable
                                @change="changeVal(scope)"
                                @keydown.enter.native="nextFocus2(i + 1, scope.$index, scope.row[scope.column.property])" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.$index !== 0" class="g-table-btn" style="font-size:14px"
                                @click="delNewData2(scope.row, scope.$index)"><i class="icon iconfont icontrash"
                                    style="font-size:18px;color:#4574d0"></i>删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                
                
data() {
        return {
            loading: false,
            tableHeight: '500',
            form: {
                attrList: [],    //最终用于提交的表格数据
            },
            //动态表头数据(单列)
            headData2: [
                {
                    titleName: "设备ID",
                    id: 1
                }
            ],
            allNum2: 0,    //总数(单列)
            rowIndex2: 0,  //行号(单列)
            attrIndex2: 1, //输入框列数(单列)
            delArr2: [],     //(单列)
        }
    },
    
    
    //新增行（单列）
        addRow2() {
            let query = {
                index: this.rowIndex2
            }
            //不存在attrList   新增该属性并新增一行
            if (!this.form.attrList) {
                this.$set(this.form, "attrList", [query]);
            } else {
                this.form.attrList.push(query);
            }
            //页面加载完成后再获取焦点
            this.$nextTick(() => {
                this.$refs["rowIndex2"][this.allNum2].focus();
                this.rowIndex2++
                this.allNum2 = this.attrIndex2 * this.rowIndex2
            })
        },
    
    //换行（单列），这里是因为实际项目会对每次扫码的内容做校验，所以加了接口。如果无需校验，直接执行res.code == 200内的代码即可。
        nextFocus2(index, row, val) {   //index为第几列（即为1）；row为第几行（从0开始）；val为当前文本框输入的值
            if (!val || !val.trim()) {
                this.$message({
                    message: '设备ID不能为空！',
                    type: 'warning',
                    showClose: true,
                });
                return false;
            }
            let data = new Object;
            data.out_store_no = this.scheindexId;
            data.device_id = val;
            //校验
            API.checkByScan(data)
                .then(res => {
                    if (res.code == 200) {
                        if ((row + 1) * this.attrIndex2 < this.allNum2 && this.allNum2 != 0) {
                            let val = this.attrIndex2 * row + index
                            this.$refs["rowIndex2"][val].focus();
                        } else {
                            //最后一个输入框跳转新增一行
                            if (index % this.attrIndex2 == 0) {
                                this.addRow2();
                                if ((row + 1) % 240 == 0) {  //是不是到了当前板的最后一行
                                    this.autoPrint();
                                }
                            } else {
                                let val = this.attrIndex2 * (this.rowIndex2 - 1) + index
                                this.$nextTick(() => {
                                    this.$refs["rowIndex2"][val].focus();
                                })
                            }
                        }
                    }
                })
                .catch(err => {

                })
        },
        
        //删除行（单列）
        delNewData2(row, index) {
            this.delArr2.push(row.index);
            this.form.attrList.splice(index, 1);
            this.rowIndex2--;
            this.allNum2 = this.attrIndex2 * this.rowIndex2;
            let delResult2 = this.form.attrList.length % 240;
            if (delResult2 == 0) {
                this.boardNum = this.boardNum - 1;
            }
        },
        
        //对每次扫码的数据进行处理，如无需额外处理，可去除。
        changeVal(e) {
            let curObj = e.row;
            let curIndex = e.$index;
            if (curObj.title0.includes('_')) {
                this.form.attrList[curIndex].title0 = curObj.title0.split('_')[1]
            } else {
                this.form.attrList[curIndex].title0 = curObj.title0;
            }
        },

5.核心代码与实例（多列）。

  • 图解（多列）：

  • 核心代码（多列）：
<el-table v-if="detailData.whether_card == 1" :data="form.attrList" ref="newData" :height="tableHeight"
                    key="pdlistdk" border tooltip-effect="dark"
                    :header-cell-style="{ background: 'rgb(234,238,249)', color: '#333' }" size="small">
                    <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
                    <el-table-column :label="item.titleName" :prop="'title' + i" align="center"
                        v-for="(item, i) in headData" :key="i">
                        <template slot-scope="scope">
                            <el-input :placeholder="'请输入' + item.titleName" ref="rowIndex"
                                @change="changeVal(scope)"
                                v-model="scope.row[scope.column.property]" style="width: 100%" size="mini" clearable
                                @keydown.enter.native="nextFocus(i + 1, scope.$index, scope.row[scope.column.property])" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.$index !== 0" class="g-table-btn" style="font-size:14px"
                                @click="delNewData(scope.row, scope.$index)"><i class="icon iconfont icontrash"
                                    style="font-size:18px;color:#4574d0"></i>删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                
                
     data() {
        return {
            loading: false,
            tableHeight: '500',
            form: {
                attrList: [],    //最终用于提交的表格数据
            },
            //动态表头数据(多列)
            headData: [
                {
                    titleName: "设备ID",
                    id: 1
                },
                {
                    titleName: "ICCID",
                    id: 2
                },
            ],
            allNum: 0,    //总数(多列)
            rowIndex: 0,  //行号(多列)
            attrIndex: 2, //输入框列数(多列)
            delArr: [],     //(多列)
        }
    },
    
    
    //对每次扫码的数据进行处理，如无需额外处理，可去除。
        changeVal(e) {
            let curObj = e.row;
            let curIndex = e.$index;
            if (curObj.title0.includes('_')) {
                this.form.attrList[curIndex].title0 = curObj.title0.split('_')[1]
            } else {
                this.form.attrList[curIndex].title0 = curObj.title0;
            }
        },
        
     //新增行（多列）
        addRow() {
            let query = {
                index: this.rowIndex
            }
            //不存在attrList   新增该属性并新增一行
            if (!this.form.attrList) {
                this.$set(this.form, "attrList", [query]);
            } else {
                this.form.attrList.push(query);
            }
            //页面加载完成后再获取焦点
            this.$nextTick(() => {
                this.$refs["rowIndex"][this.allNum].focus();
                this.rowIndex++
                this.allNum = this.attrIndex * this.rowIndex
            })
        },
        
        //换行（多列），这里是因为实际项目会对每次扫码的内容做校验，所以加了接口。如果无需校验，直接执行res.code == 200内的代码即可。
        nextFocus(index, row, val) {  //index为第几列（即为1和2）；row为第几行（从0开始）；val为当前文本框输入的值
            if (!val || !val.trim()) {
                this.$message({
                    message: index == 1 ? '设备ID不能为空！' : 'ICCID不能为空！',
                    type: 'warning',
                    showClose: true,
                });
                return false;
            }
            if (index == 1) {  //不做校验
                if ((row + 1) * this.attrIndex < this.allNum && this.allNum != 0) {
                    let val = this.attrIndex * row + index
                    this.$refs["rowIndex"][val].focus();
                } else {
                    //最后一个输入框跳转新增一行
                    if (index % this.attrIndex == 0) {
                        this.addRow()
                    } else {
                        let val = this.attrIndex * (this.rowIndex - 1) + index
                        this.$nextTick(() => {
                            this.$refs["rowIndex"][val].focus();
                        })
                    }
                }
            } else {  //校验
                let data = new Object;
                data.out_store_no = this.scheindexId;
                data.device_id = this.form.attrList[row].title0;
                data.iccid = this.form.attrList[row].title1;
                API.checkByScan(data)
                    .then(res => {
                        if (res.code == 200) {
                            if ((row + 1) * this.attrIndex < this.allNum && this.allNum != 0) {
                                let val = this.attrIndex * row + index
                                this.$refs["rowIndex"][val].focus();
                            } else {
                                //最后一个输入框跳转新增一行
                                if (index % this.attrIndex == 0) {
                                    this.addRow();
                                    if ((row + 1) % 120 == 0) {  //是不是到了当前板的最后一行
                                        this.autoPrint();
                                    }
                                } else {
                                    let val = this.attrIndex * (this.rowIndex - 1) + index
                                    this.$nextTick(() => {
                                        this.$refs["rowIndex"][val].focus();
                                    })
                                }
                            }
                        }
                    })
                    .catch(err => {

                    })
            }
        },
        
        //删除行（多列）
        delNewData(row, index) {
            this.delArr.push(row.index);
            this.form.attrList.splice(index, 1);
            this.rowIndex--;
            this.allNum = this.attrIndex * this.rowIndex;
            let delResult = this.form.attrList.length % 120;
            if (delResult == 0) {
                this.boardNum = this.boardNum - 1;
            }
        },

6.总结。

如图为例，最终的扫码录入数据都是保存在了form.attrList中。以上就是扫描枪在vue实际项目中的基本使用。特别需要注意的是如果我们在自己项目中需要对每次扫码录入的数据做特殊处理，一定不能直接对v-model绑定的数据做更改，会抛异常，而是应该借住input的change事件对其处理。（v-model的双向数据绑定原理可查看我的另一篇文章--v-mode的双向数据绑定原理解析与日常案例使用分析）。

三月.暖阳
关注
h5扫码，jsQR，html5-qrcode
09-28
包含jsQR.js和html5-qrcode.min.js 文件包，调用video识别二维码，不是上传图片那一套，注意一定要在https条件下运行
扫码枪可以实现无焦点捕获扫码输入
08-13
v1.0 扫码枪可以实现无焦点捕获扫码输入，并上传数据服务。 1、 分为免费版和注册版： 免费版上传数据有限制。每次可上传20条数据，每天可上传200条数据，总共可上传60000条数据 注册版没有限制 2、 本软件不记录保存上传任何信息。 3、 其它说明 (1)打开软件，把鼠标点击输入框，扫码即可 (2)不用考虑鼠标，直接监控扫码输入，若360卫士提示有键盘监控请通过 (3)在设置中，可修改扫码的数据和上传功能。修改数据后要保存才立即生效。 (4)扫码以回车13为结束，扫码的字符输入间隔可调整，一般60-80毫秒。
JS实现扫码枪扫描二维码功能
10-15
主要介绍了JS实现扫码枪扫描二维码功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Android蓝牙扫码枪开发实战指南 - 使用scangon库
最新发布
gitblog_00521的博客
09-12 477
Android蓝牙扫码枪开发实战指南 - 使用scangon库 scangon Android蓝牙扫码枪开发示例 项目地址: https://gitcode.com/gh_mirrors/sc/scangon ...
探索Vue的扫码新境界：vue-scan-demo深度解析
gitblog_00515的博客
09-12 384
探索Vue的扫码新境界：vue-scan-demo深度解析 vue-scan-demo vue基于H5+扫码demo 项目地址: https://gitcode.com/gh_mirrors/vu/vue-scan-demo ...
使用扫码枪扫码二维码并采集二维码信息
ZhangYuan2HH的博客
09-07 3746
扫码枪识别二维码 采集数据方案
vue实现扫码功能
01-21
最近在项目中碰见一个打开摄像头扫码的功能，项目最后打包成app，用的是hBuilder打的包，刚好hBuilder打包集成H5+sdk,就可以直接用人家的sdk了。 demo地址：vue-scan-demo 代码实现： ...载入中... <button @click=startRecognize>1.创建控件</button> <button
vue接入扫码枪
JessicaLi的博客
04-07 1417
【代码】vue接入扫码枪。
vue使用扫码枪扫描二维码获取数据
weixin_44634613的博客
10-09 2957
扫码枪本质是键盘按键输入，在结束时触发回车事件，即可以通过监听键盘输入获取扫码枪扫描到的数据并监听回车事件判断是否结束。2.在页面挂载后开始监听keydown事件，并在页面销毁后将此事件移除。1.扫码枪读取数据会触发键盘事件，通过监听keydown事件获取数据。3.数据读取完成之后会触发enter键，判断结束。3.扫码枪扫描时会连续触发并获取到扫描到的数据。在此只使用触发键盘事件这一方法。详细代码（优化代码）
vue扫码枪组件封装，避免影响到其他表单输入或者其他用户操作
qq_38814363的博客
12-27 1048
扫码枪的一些实现方法，和复用组件的实现
vue对接扫码枪（vue）
wwh123963的博客
10-20 1万+
vue对接扫码枪 因为公司的需求，需要接入扫码枪进入系统，所以有了这篇文章，我这边框架用的是是element ui的。 首先得解决怎么去触发提交到后台的问题，扫码枪只能扫描出条形码的内容，类似于触发键盘输入的效果，但是和普通的键盘输入又所区别的是，扫码枪每次扫描完之后，是会有一个回车的效果，所以我观察到element ui的表单里当只有一个intput输入框的时候，他是能够触发自动提交的事件的。 于是就有了一下代码 但是为了方便，我们需要能够让input输入框能够自动聚焦，可以实现连续的处理扫码，很方便的
labview绝对实用发的扫码枪扫码例子，可作收款机，仓库管理等程序
05-23
labview绝对实用发的扫码枪扫码例子，可作收款机，仓库管理等程序。绝大多的毕业设计会用到扫码，这里列举一个例子
扫码枪 监听数据，无焦点获取
05-27
扫码枪 监听数据，无焦点获取
基于socket的扫码枪服务+web前台
08-28
【标题】"基于socket的扫码枪服务+web前台"是一个集成解决方案，用于构建一个系统，该系统能够通过网络接收扫码枪的数据并在Web前端展示。这个系统的核心是利用Socket编程技术来实现实时通信，使扫码枪能够作为一个...
vue3使用qrcode生成二维码
warm water
06-09 2848
vue3使用原生table组件加载qrcode插件显示二维码。
如何在Vue3中实现二维码生成和扫描功能
有我更精彩的博客
06-22 3255
在现代Web应用中，二维码已成为一种常见的工具，无论是用于支付、数据分享还是用户验证。对于前端开发者来说，掌握如何在Vue3中实现二维码的生成和扫描功能，是一项非常实用的技能。本篇博客将详细介绍如何在Vue3中实现这一功能，包含示例代码和详细步骤，帮助你在面试中脱颖而出。
Vue获取扫码枪输入内容（可一定程度无视输入法）
热门推荐
m0_46267097的博客
01-21 1万+
Vue获取扫码枪输入内容（可一定程度无视输入法）背景环境前提方案一、隐藏密码框法代码测试优点缺点结果二、输入时间间隔法代码测试优点不足结果三、页面事件监听+输入事件间隔法代码调用组件方组件方测试优点不足结果 背景 WMS项目需要使用扫码枪，但当我输入法为中文输入法时，扫码枪输入会出现中文或者缺字母少数字的情况，尝试了不少方法，最终于找到了一种比较合适的解决办法。 环境 名称 内容 语言 Vue、ElementUI、Js 扫码枪 型号OBM-3802 前提 经过不停的扫码和观察，发现了
vue扫码枪扫描二维码
09-08
要在 Vue 应用中使用扫码枪扫描二维码，您可以使用名为 `vue-qrcode-reader` 的第三方库。首先，您需要安装这个库： ```bash npm install vue-qrcode-reader ``` 然后，在您的 Vue 组件中引入并使用它： ```javascript <template> <div> <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream> <p>扫描结果： {{ result }}</p> </div> </template> <script> import { QrcodeStream } from 'vue-qrcode-reader'; export default { components: { QrcodeStream, }, data() { return { result: '', }; }, methods: { onDecode(result) { this.result = result; }, onInit(promise) { promise.then(() => { console.log('成功初始化'); // 如果成功初始化，您可以在这里执行其他操作，例如显示提示消息等。 }).catch((error) => { console.error('初始化失败', error); // 如果初始化失败，您可以在这里处理错误。 }); }, }, }; </script> ``` 在这个示例中，我们创建了一个包含 `qrcode-stream` 组件的 Vue 组件。当扫描到二维码时，`@decode` 事件会触发 `onDecode` 方法，将扫描结果显示在页面上。`@init` 事件用于处理初始化过程，您可以在其中执行其他操作，例如显示提示消息等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值