vue对接扫码枪

2,656 阅读1分钟

扫码枪会将扫描到的数据代入到获取焦点的输入框中,并且触发输入框的“Enter”事件 代码示例:

<template>
    <el-input v-model="scanCode" ref="inputValue" @keyup.native="concludeData"></el-input>
    <!---- 如果在表单内扫码,默认第一次会触发表单的submit事件,需要阻止表单的默认事件 ------ -->
    <!-- 
      <el-form @submit.native.prevent>
        <el-input v-model="scanCode" ref="inputValue" @keyup.native="concludeData"></el-input>
      <el-form>
    -->
    
</template>
<script>
    export default{
        data(){
            renturn{
                scanCode:''
            }
        },
        created(){
            let _this = this;
            this.$nextTick(_=>{
                _this.$refs.inputValue.focus();//聚焦
            })
        },
        methods:{
            concludeData(e){
                if(e.code === 'Enter'){
                    console.log(this.scanCode)
                    //扫码后处理事件
                }
            },
        }
    }
</script>