标签：扫码 界面 刷新 自动 enter 回车键

扫码枪扫码或者敲回车键时禁止 界面自动刷新

需求：做一个兼职人员下班退勤时扫码枪扫码退勤的功能，输入框自动聚焦

问题：敲回车 或者扫码时 界面会自动刷新

1、第一步：重要的是 在el-form标签中的 @submit.native.prevent，阻止界面刷新，扫码功能就是 @keyup.enter.native=“submitCode” ，扫码枪扫码的意思就是扫出来的码自动出现在光标所在的地方，并自动调用回车键enter，所以扫码枪扫码和在input框输入敲回车效果是一样的，只需要统一监听enter键就可以了，也就是在中加上**@keyup.enter.native**

 <!-- 添加或修改打卡对话框 -->
        <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        @submit.native.prevent
         <el-row style="padding-bottom: 20px">
            <el-col :span="24">
              {{ tempDay }} - {{ attendance }} ({{ form.checkInTime }})
            </el-col>
          </el-row>
          <el-form-item
            :label="$t('条形码')"
            prop="workerCode"
            label-width="100px"
          >
            <el-input
              clearable
              v-model="form.workerCode"
              :placeholder="$t('请输入条形码')"
              @keyup.enter.native="submitCode"
              ref="workerCodeIpt"
            />
          </el-form-item>
          </el-form>
      

2、第二步：在enter键之后submitCode的这个函数使用条形码的值/输入的值调接口

 // 键盘回车
    submitCode(event) {
    //扫出的条形码 就是用v-model绑定的form.workerCode值 直接取就可以
    //这是你自己需要做什么操作 比如调接口或者什么
    //调接口
    },

标签：扫码,界面,刷新,自动,enter,回车键
来源： https://blog.csdn.net/weixin_45869649/article/details/120260159

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。