<template>
|
<el-form size="large" :inline="true" label-width="68px" @submit.native.prevent>
|
<el-form-item v-for="(item, index) in scanList"
|
:key="index"
|
label-width="200"
|
label="箱体码"
|
:prop="item.value"
|
style="align-content: center"
|
@focus="handleFocus(index)">
|
<input v-model="item.value"
|
ref="scanInput${index}"
|
style="height: 39px; width: 300px"
|
placeholder="请扫描箱体码"
|
/>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
scannerFlag: false,
|
scanList: [
|
{ value: '' },
|
{ value: '' },
|
// 可以根据需要增加更多的项
|
],
|
focusedIndex: 0, // 当前聚焦的input索引
|
};
|
},
|
mounted() {
|
this.focusScanInput(this.focusedIndex);
|
this.setFocus()
|
this.$refs.scanInput$index.addEventListener('keydown',this.handleScannerInput)
|
},
|
beforeDestroy() {
|
this.$refs.scanInput$index.removeEventListener('keydown',this.handleScannerInput)
|
},
|
watch: {
|
// 监听scanList的变化，如果发现焦点索引超出范围，则自动聚焦到最后一个输入框
|
scanList: {
|
deep: true,
|
handler(newList) {
|
if (this.focusedIndex >= newList.length) {
|
this.focusedIndex = newList.length - 1;
|
this.$nextTick(() => {
|
this.focusScanInput(this.focusedIndex);
|
});
|
}
|
},
|
},
|
},
|
|
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.item.value = inputValue
|
if (event.key === 'Enter'){
|
this.scannerFlag = true
|
console.log('条码：',this.item.value)
|
//扫描完成
|
}
|
},
|
|
handleFocus(index) {
|
this.focusedIndex = index;
|
},
|
focusScanInput(index) {
|
this.$refs[`scanInput${index}`][0].focus();
|
},
|
},
|
};
|
</script>
|
<!--在这个例子中，我们使用了一个数组scanList来动态生成多个输入框。通过handleFocus方法更新当前聚焦的输入框索引，
|
并通过watch来监听scanList的变化，以确保如果新添加的输入框超出了原有的索引范围，
|
我们可以自动聚焦到最后一个输入框上。focusScanInput方法用于设置真实DOM的焦点。-->
|
