【工作】vant的search组件手动聚焦

背景

为了方便用户使用，第一次进来时默认输入框聚焦，但是当用户并没有输入手机号，点击按钮时，需要给一个友好提示，并且输入框重新聚集上。

过程

最开始以为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();

这样很好的实现了我想要的效果～完美～～

总结

1. 也不能太过于依赖文档，最好还是看下源码有没有封装对应的方法供外部调用
2. 既然没有提供，我们就找到最基本的input，调用它的方法
3. 如果手动聚焦，记住input原生永远可以提供给你focus方法。哈哈，别灰心～