自定义选择器点击触发输入框后自动聚焦的实现问题咨询

嘿，我看到你在自定义选择器组件里遇到了输入框自动聚焦的麻烦——点击打开输入框后得再点一次才能获取焦点，之前尝试用$refs实现自动聚焦也没成功。这个问题的核心原因其实很简单：当你设置selectorInput = true时，输入框的DOM还没完成渲染，这时候调用focus()根本找不到有效的元素。下面给你两个靠谱的解决方案：

方案1：修复$nextTick的使用方式 #

你之前注释掉的$nextTick思路是对的，只是可能引用方式出错了。你的输入框是单个元素，不是数组，所以不需要加[lastIdx]。修改你的makeFocusOnInput方法如下：

makeFocusOnInput () {
  this.selectorInput = true; // 先把输入框显示出来
  this.$nextTick(() => {
    // 等Vue更新完DOM之后再执行聚焦
    if (this.$refs.myInputs) {
      this.$refs.myInputs.focus();
    }
  });
}

为什么这样能行？ #

$nextTick会在Vue完成DOM更新的下一个事件循环里执行回调函数，这时候输入框已经实实在在渲染到页面上了，$refs.myInputs能正确拿到DOM元素，调用focus()自然就能立即生效。

方案2：用自定义指令v-focus（更优雅的姿势） #

如果你想代码更简洁，推荐用Vue的自定义指令来处理这个聚焦逻辑，这也是官方推荐的处理DOM元素行为的方式：

第一步：在组件内注册局部指令 #

在你的<script>里添加directives选项：

export default {
  // ... 其他已有的props、data等选项
  directives: {
    focus: {
      // 当绑定指令的元素被插入到DOM中时自动执行
      inserted (el) {
        el.focus();
      }
    }
  },
  // ... 其他methods、watch等代码
}

第二步：给输入框加上指令 #

修改模板里的input标签，添加上v-focus指令：

<input 
  ref="myInputs" 
  @input="sendInput()" 
  :style="{width: inputInnerWidth}" 
  :type='type' 
  v-model="selInput" 
  :placeholder="defaultPlaceholder" 
  class="inputBuy thin"
  v-focus
/>

这时候你的makeFocusOnInput方法就只需要负责显示输入框就行：

makeFocusOnInput () {
  this.selectorInput = true;
}

这种方式的好处 #

自定义指令会自动监听元素的插入时机，完全不用你手动处理DOM更新的时间点，代码更干净，逻辑也更清晰。

额外小检查 #

• 确认一下inputWrapBuy容器的v-show确实是绑定到selectorInput的，没有其他逻辑不小心干扰了输入框的显示状态。
• 就算你后续考虑动态创建输入框，上面的两种方案依然适用，因为它们都是基于DOM渲染时机来处理的。

试试上面的方案，应该就能解决你需要第二次点击才能聚焦的问题啦！

内容的提问来源于stack exchange，提问作者Alex Gorbunov