一、遇到的问题
点击一个弹窗,弹窗里的input自动聚焦
二、实现方式
1、使用的是tdesign的t-input,查看官方文档,设置autofocus属性就可以自动聚焦;
这个方式页面初始加载的input是有效的,但是此处是弹窗里的input,是后面动态加载出来的,autofocus未生效
2、使用ref的方式实现,最开始一直没生效,打印inputRef也是null,最后发现要等dom元素加载完再调用focus就成功了,这里setTimeout实现了,也可以使用nextTick
<t-input borderless clearable class="seatch_input" v-model="search_value"
placeholder="输入职位名称" autofocus @change="onSearch" ref="inputRef" />
const inputRef = ref(null);
const onSelect = (e) => {
console.log('onSelect')
setTimeout(() => {
inputRef?.value.focus();
}, 300);
};
nextTick(() => {
if (inputRef.value) {
inputRef.value.focus();
}
});
三、uview-plus里input自动聚焦
官方文档:focus="!0"即可
<up-search height="60rpx" shape="round" searchIconSize="40rpx" placeholder="输入职位名称" bgColor="#F6F6F6"
:showAction="false" @change="searchJobTitle" v-model="jobFilterKeyword" :focus="!0"></up-search>