背景
为了方便用户使用,第一次进来时默认输入框聚焦,但是当用户并没有输入手机号,点击按钮时,需要给一个友好提示,并且输入框重新聚集上。
过程
最开始以为search组件这个方法肯定已经实现了并且看官网文档上也有对应的方法。
心里想,这还不简单,拿到实例之后调用方法即可,但是尝试了之后,发现页面报错了,并且也没有实现理想中的效果。
<van-search
ref="searchInput"
:autofocus="true"
v-model="tel"
:maxlength="11"
placeholder="请输入手机号"
@input="requestGetDriverInfo"
/>
if (!this.tel) {
Dialog.alert({
title: '提示',
message: '请输入手机号查询。',
confirmButtonText: '知道了'
})
.then(() => {
this.$refs.searchInput.focus();
})
}
直接git上找到对应版本,看了下源码,原来search并没有提供此方法。
那怎么办呢?
好说,那就只能调用input的focus方法了。
问题
通过ref实例拿不到el,不知道为什么,有知道为什么的小伙伴也欢迎留言评论下~
解决
既然通过ref找到search之后拿不到el,那就直接找input吧
this.$el.querySelector('.van-field__control').focus();
这样很好的实现了我想要的效果~完美~~
总结
- 也不能太过于依赖文档,最好还是看下源码有没有封装对应的方法供外部调用
- 既然没有提供,我们就找到最基本的input,调用它的方法
- 如果手动聚焦,记住input原生永远可以提供给你focus方法。哈哈,别灰心~