<template>
|
<div style="height: 100%;width: 100%">
|
<el-card class="box-card">
|
<el-form size="large" :inline="true" label-width="68px" @submit.native.prevent>
|
<el-form-item label-width="200" label="箱体码" :prop="barcode" style="align-content: center">
|
<input v-model="barcode"
|
ref="inputdata"
|
style="height: 39px; width: 300px"
|
placeholder="请扫描箱体码"
|
/>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</div>
|
</template>
|
<script>
|
export default {
|
data(){
|
return {
|
scannerFlag: false,
|
barcode: "",
|
};
|
},
|
|
mounted() {
|
this.setFocus()
|
this.$refs.inputdata.addEventListener('keydown',this.handleScannerInput)
|
},
|
beforeDestroy() {
|
this.$refs.inputdata.removeEventListener('keydown',this.handleScannerInput)
|
},
|
methods: {
|
refresh() {
|
location.reload();
|
},
|
setFocus(){
|
this.$nextTick(()=>{
|
this.$refs.inputdata.focus()
|
})
|
},
|
handleScannerInput(event){
|
if (this.scannerFlag){
|
this.barcode = ''
|
this.$refs.inputdata.value = ''
|
this.scannerFlag = false
|
}
|
const input = event.target
|
const inputValue = input.value
|
this.barcode = inputValue
|
if (event.key === 'Enter'){
|
this.scannerFlag = true
|
console.log('条码：',this.barcode)
|
//扫描完成
|
}
|
},
|
},
|
}
|
</script>
|
<style scoped lang="scss">
|
</style>
|
