vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案

目录
  • 项目需求:
  • 解决方案探索
  • 错误代码:
  • 问题就出在
  • 解决方法
  • 完整代码 如下

项目需求:

输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口

根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题。于是开始了测试之路。

解决方案探索

1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口。 【x】
2.考虑到可能是因为vue原因影响,就将element的 el-input,改为原生js Input框。【x】
3.输入框加自动聚焦自定义指令,确保输入完成输入框不会失去焦点 【x】,因为el-input enter键触发完成后,输入框焦点还在。 【x】

4.最后分析,让客户给现场的服务器日志发送过来,查看前端传到接口中的 条码 是怎样的一个缺失状态。
通过查看 服务器日志,发现输入框在调取第一个验证接口时,条码发送的是完整的 并没有缺失,紧接着调取的第二个接口 条码就出现了问题。

**第二个接口传值时: 条码会多出来几位,导致第二次再去扫入,第二次的条码会丢失几位 **

查到问题 就好解决啦~

错误代码:

this.barcode: 输入框的值

verifyPutIn:输入框第一次调用的 验证接口

getInput():调用第二个接口的方法

问题就出在

第二个接口方法里,传参的时候, code:this.barcode,code 是又从输入框获取了一次值,这个时候就会有问题
因为扫码枪在快速扫描的时候,速度很快,字符过长,页面读取速度会有些慢,这时候重新从输入框获取值,这个值并不是刚开始的输入值了,可能会带有第二次扫入的几个字符

所以服务器日志中看到的, 第二个接口传过来的条码号会多字符,第二次条码号的前几位 字符****会丢失 就是这个原因啦 !!!

解决方法

第二个接口调取时code值 不要再从输入框获取,而是把第一个接口传的输入框值传过来,给第二个接口用

完整代码 如下

<el-input  v-model="barcode" clearable size="small" placeholder="请扫描条码编号" style="width: 200px"
 class="filter-item" @keyup.enter.native="toQuery()"  />
  <script>
   export default {
     data() {
       return {
         barcode:''
       }
    }
   methods: {
    toQuery() {
      let verifyParam = {};
      verifyParam = {
        barcode: this.barcode,
        name: this.pageOrderName,
      };
      this.barcode = null;
      verifyPutIn(verifyParam).then((res) => {
        if (res.code == 0) {
          this.getInput(verifyParam.barcode);
        } else {
          this.$confirm(
            res.msg, res.code == -1 ? "是否强制⼊库?" : "强制⼊库",
            {
              confirmButtonText: window.vm.$i18n.t("backTips.confirm"),
              cancelButtonText: window.vm.$i18n.t("backTips.cancel"),
              type: "warning",
            }
          ).then(() => {
            this.getInput(verifyParam.barcode);
          });
        }
      });
    },
    getInput(codeStr) {
      this.queryParams = {
        code: codeStr,
        name: this.pageOrderName,
      };
      operatePos(this.queryParams).then((res) => {
        if (res.code == 0) {
          this.name = "";
          // 开启自动播放
          this.audio.autoplay = true;
          this.audio.src = this.successUrl;
          if (res.data) {
            this.sonList = res.data;
            this.getNumList(this.sonList);
            this.poData = res.data.lastScanBoxCode.slice(
              res.data.lastScanBoxCode.length - 1
            );
            this.boxName = res.data.currentRfid.slice(0, 2);
            this.boxPartitionCounts = [];
            for (let i = 0; i < res.data.boxPartitionCounts.length; i++) {
              this.boxPartitionCounts.push({
                latticeNumber: this.boxNoList[i],
                amount: res.data.boxPartitionCounts[i],
              });
            }
            this.resSize = res.data.platsize;
          }
          this.$infoMsg.showInfoMsg(res.msg, this);
        } else {
          // 开启自动播放
          this.audio.autoplay = true;
          this.audio.src = this.errorUrl;
          this.$infoMsg.showErrorMsg(res.msg, this);
        }
      });
    },
 }
  </script>

到此这篇关于vue项目element UI input框扫码枪扫描过快出现数据丢失问题的文章就介绍到这了,更多相关vue扫码枪内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue对插件(iview,elementui,treeselect)样式的局部修改方式

    目录 (iview,elementui,treeselect)样式的局部修改 学习描述 具体方法 vue+iview 样式穿透-修改第三方插件样式 修改第三方插件样式 (iview,elementui,treeselect)样式的局部修改 学习描述 在vue的使用过程中,我们知道插件的使用可以大大的提高我们的开发效率,这写插件都是经过很多人的验证和修改的,要比我们自己写方便的很多. 但是在开发的过程中,有些插件一些在特定的页面我们可能不要原来的样式,需要进行修改.然而我们在使用vue的过程中都会

  • Vue3.0之引入Element-plus ui样式的两种方法

    目录 第一种:CDN 第二种:通过 npm 安装,并希望配合 webpack 使用 安装:官网欢迎star:github npm install element-plus --save 第一种:CDN 目前可以通过 unpkg.com/element-plus 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用.<! – 引入样式 -->< link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/t

  • vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式. 方法一(不推荐):使用class 为要修改的这个组件标签设置一个 class 类名,然后在 <style></style> 标签中设置样式.但要注意这种方式必须是在全局下才会生效,也就是说 <style></style> 标签中不能用 scoped 属性. <style> </style>

  • vue+element-ui前端使用print-js实现打印功能(可自定义样式)

    目录 下载依赖 使用print-js 实现打印功能 需要打印的内容 按钮调用打印函数 打印函数 调整打印字体大小 参数 总结 print-js官网链接: https://printjs.crabbly.com/ 下载依赖 npm install print-js --save 在package.json文件中增加print-js依赖. "dependencies": { "axios": "^0.19.2", "babel-polyfi

  • 使用vue深度选择器修改ElementUI组件内样式的示例代码

    例子:el-collapse标签修改子组件样式 在带有scoped属性的style中书写样式时,无法作用影响到子组件中的样式,此时我们会使用到deep深度选择器,来解决此问题,我们在使用less预处理器,能正常使用,但是在scss预处理器中会报错. <style lang="scss" scoped> .collapse1 { /deep/ .el-collapse-item__content { padding: 0px 5%; background: #fff; } /

  • vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案

    目录 项目需求: 解决方案探索 错误代码: 问题就出在 解决方法 完整代码 如下 项目需求: 输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口 根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题.于是开始了测试之路. 解决方案探索 1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口. [x]2.考虑到可能是

  • 基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    目录 问题描述 实现效果 实现代码 问题描述 在开发时遇到一个数字区间输入框的需求,如下图: 项目使用的是vue,组件库用的是element UI,但是element UI并没有提供数字区间组件,只提供了InputNumber 计数器输入框,如果用两个计数器输入框进行拼接也能满足需求,但是样式调试起来太过于复杂且不够灵活,不能令人满意,并且该数字区间输入框在其它界面也有这种需求,于是就在element input输入框的基础上自行封装了一个数字区间组件使用. 实现效果 实现效果如下: 使用方式如

  • vue中监听input框获取焦点及失去焦点的问题

    目录 一.背景 二.首先是正宗的监听事件的写法 1.html代码 2.JS部分 三.为什么上次监听焦点事件失败呢 1.不好用的原因 2.新增指令的方法 一.背景 博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况.当时百思不得其解.今天又在写vue页面的时候,突然@blur和@focus又好用了.emmmm,看来这部分值得一战. 二.首先是正宗的监听事件的写法 1.html代码 //这是html的输入框.定义了一个获取焦点,失去焦点的方法 <input pla

  • vue+axios+element ui 实现全局loading加载示例

    实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function st

  • vue登录页面设置验证码input框的方法

    本文实例为大家分享了vue登录页面设置验证码input框的具体代码,供大家参考,具体内容如下 1.效果 2.代码 第一步:建立子组件(举例,文件名可自己取)----代码如下 子组件 SIdentify 的完整代码: <template>   <div class="s-canvas">     <canvas id="s-canvas" :width="contentWidth" :height="cont

  • Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    遇到的问题 使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错. 在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解. 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的

  • vue中如何禁止input框和textarea编辑

    目录 如何禁止input框和textarea编辑 第一种方法 第二种方法 说说input无法输入原因 如何禁止input框和textarea编辑 在我们开发项目的时候,有时候我们不希望用户对我们的页面进行操作,尤其是输入框之类的,这时候我们需要设置一下 第一种方法 <input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%"

  • 解决Vue的项目使用Element ui 走马灯无法实现的问题

    1.在vue项目中引入element ui http://element.eleme.io/#/zh-CN/component/carousel 引入后,HTML部分 <el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h3><img :

  • vue项目如何引入element ui、iview和echarts

    目录 vue引入element ui.iview和echarts 1.vue项目引入elementui 2.vue项目中引入iview 3.vue项目中引入echarts 4.main.js文件代码截图 5.echarts在引入后 6.引入之后就可以使用他们的组件了 iview与elementui对比 表格 风格 按需引入 表单验证 下拉选择器 vue引入element ui.iview和echarts 记性不好,每次引入都要重新搜一遍,今天把几个自己整理一下.全部引入,没搞按需引入. 1.vu

  • Vue前端整合Element Ui的教程详解

    目录 Vue前端整合Element Ui 1.安装Element Ui组件库 2.测试Element Ui是否整合成功 Vue前端整合Element Ui 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型. Element Ui组件官网 1.安装Element Ui组件库 WIN+

随机推荐