Vue 3点击文本切换为输入框后如何实现单次点击即可直接输入

问题根因 #

你使用的是Element UI的el-input组件，自定义v-focus指令的inserted钩子获取到的el参数是el-input组件外层的容器DOM节点，并非内部真实的原生<input>元素，因此直接调用el.focus()不会触发输入框聚焦。

解决方案 #

有两种常用的修复方式，选择任意一种即可：

方案1：修改自定义focus指令 #

调整指令逻辑，定位到el-input内部的原生输入框再执行聚焦操作：

directives: {
  focus: {
    inserted(el) {
      // 查找组件内部的原生input元素
      const nativeInput = el.querySelector('input')
      nativeInput && nativeInput.focus()
    }
  }
}

模板部分的v-focus=""可以简化为v-focus，无需额外赋值。

方案2：通过nextTick手动触发聚焦 #

不需要自定义指令，通过组件引用+DOM更新后回调的方式实现：

1. 给el-input添加ref属性：

<el-input
  v-if="edit"
  ref="editInput"
  type="text"
  :value="local"
  placeholder="place"
  <!-- 其余原有属性保持不变 -->
/>

2. 将p标签的点击逻辑封装为方法：

<p v-else @click="handleEdit">{{ local }}</p>

3. 在methods中添加对应方法：

methods: {
  handleEdit() {
    this.edit = true
    // 等待DOM更新完成后触发聚焦
    this.$nextTick(() => {
      // 调用Element UI el-input内置的focus方法
      this.$refs.editInput.focus()
    })
  }
}

内容的提问来源于stack exchange，提问作者Sylvain Page