扫码枪扫码或者敲回车键时禁止 界面自动刷新
需求:做一个兼职人员下班退勤时扫码枪扫码退勤的功能,输入框自动聚焦
问题:敲回车 或者扫码时 界面会自动刷新
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值 直接取就可以
//这是你自己需要做什么操作 比如调接口或者什么
//调接口
},