需求:最近在做电商项目的时候使用到了uniapp的搜索插件,但产品经理觉得插件有些不够人性化。需要页面进入就让搜索框处于自动对焦状态
代码:
<input :placeholder="placeholder"
@input="inputChange"
confirm-type="search"
@confirm="triggerConfirm"
class="input"
:class="{'center':!active && mode === 2}" :focus="isFocus" v-model="inputVal"
@focus="focus"
@blur="blur"
ref="searchInput" />
属性:
data() {
return {
active: false,
inputVal: "",
searchName: "取消",
isDelShow: false,
isFocus:false,
};
},
方法:
focus() {
this.active = true;
this.isFocus=true
//HM修改 增加获取焦点判断
if (this.inputVal) {
this.isDelShow = true;
}
},
uniapp已经为我们提供了自动对焦的属性(focus)和方法@focus。我们只需要在vue的生命周期中进行调用即可。这样页面进入时就会自动对焦