最近在开发中pda端app时遇到了一个连续扫码之后输入框不自动聚焦问题。
不自动聚焦的代码如下:
<u-input placeholder="载具编码" prefixIcon="scan" prefixIconStyle="font-size: 25px;color:
#909399" clearable v-model.trim="billno" style="padding: 0px;" @btntap="search"
:focus="showInp" @change="initData">
<template slot="suffix">
<u-button @tap="initData" type="success" size="normal" class="input-btn">搜索
</u-button>
</template>
</u-input>
async search() {
//其他逻辑代码......
let data = {
cCode: this.billno,
};
let res = await pageCode(data);
//其他逻辑代码......
this.$refs.uToast.show({
message: '...',
duration: 2000
});
this.billno = '';//先清空输入框的值
this.showInp = false;
this.$nextTick(()=>{
this.showInp = true;//在这里重新给输入框聚焦
})
}
可以看到上面的代码是没什么问题的。
解决代码如下:
<u-input placeholder="载具编码" prefixIcon="scan" prefixIconStyle="font-size: 25px;color:
#909399" clearable v-model.trim="billno" style="padding: 0px;" @btntap="search"
:focus="showInp" @change="initData" v-show="showInp">
<template slot="suffix">
<u-button @tap="initData" type="success" size="normal" class="input-btn">搜索
</u-button>
</template>
</u-input>
<u-input placeholder="载具编码" prefixIcon="scan" prefixIconStyle="font-size: 25px;color:
#909399" clearable v-model.trim="billno" style="padding: 0px;" @btntap="search"
:focus="!showInp" @change="initData" v-show="!showInp">
<template slot="suffix">
<u-button @tap="initData" type="success" size="normal" class="input-btn">搜索
</u-button>
</template>
</u-input>
async search() {
//其他逻辑代码......
let data = {
cCode: this.billno,
};
let res = await pageCode(data);
//其他逻辑代码......
this.$refs.uToast.show({
message: '...',
duration: 2000
});
this.billno = '';
setTimeout(()=>{
this.showInp = !this.showInp;
},0)
}
在这段代码中我使用了v-show来解决,至于说为什么不使用v-if来控制,有时间的朋友可以试试行不行,我这边是不行。