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

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

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

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

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值 直接取就可以
    //这是你自己需要做什么操作 比如调接口或者什么
    //调接口
    },