element plus el-input 获取焦点

### 方法一：通过 `onMounted` 调用 `focus()` 函数 当使用 Vue3 和 Element Plus 时，如果需要让 `<el-input />` 组件自动获取焦点，可以借助 Vue 生命周期钩子 `onMounted` 来实现。具体来说，在组件挂载完成之后手动调用 `focus()` 方法来设置焦点。 以下是具体的代码示例： ```javascript <template> <div> <el-input ref="inputRef"></el-input> </div> </template> <script setup> import { onMounted, ref } from 'vue'; const inputRef = ref(null); onMounted(() => { if (inputRef.value) { inputRef.value.focus(); // 手动触发 focus() } }); </script> ``` 此方法适用于静态渲染场景下的输入框自动聚焦[^3]。 --- ### 方法二：结合 `v-if` 或 `v-show` 使用 `$nextTick()` 如果 `<el-input />` 是动态显示的（例如由 `v-if` 控制），则需要等待 DOM 更新完毕后再尝试获取焦点。此时可以通过 Vue 提供的 `$nextTick()` 方法来确保 DOM 已经更新完成。 以下是代码示例： ```javascript <template> <div v-if="showInput"> <el-input ref="dynamicInputRef"></el-input> </div> <button @click="toggleInput">切换输入框</button> </template> <script setup> import { ref, nextTick } from 'vue'; const showInput = ref(false); const dynamicInputRef = ref(null); function toggleInput() { showInput.value = !showInput.value; if (showInput.value && dynamicInputRef.value) { nextTick(() => { dynamicInputRef.value.focus(); }); } } </script> ``` 在此情况下，由于 `v-if` 导致 DOM 可能尚未完全加载，因此需要使用 `nextTick()` 确保操作发生在正确的时机[^4]。 --- ### 方法三：解决嵌套结构导致的 autofocus 属性失效问题 有时，`<el-input>` 外部可能被额外的容器包裹（如 `<div>`）。这种情况下，即使设置了 `autofocus` 属性也可能不起作用。这时可以直接调用其内部实例的 `focus()` 方法解决问题。 代码如下所示： ```javascript <template> <div> <el-input ref="nestedInputRef" /> </div> </template> <script setup> import { onMounted, ref } from 'vue'; const nestedInputRef = ref(null); onMounted(() => { if (nestedInputRef.value) { const inputEl = nestedInputRef.value.getInput()[0]; // 获取原生 input 元素 inputEl.focus(); // 对原生 input 设置焦点 } }); </script> ``` 这种方法特别适合于复杂布局下强制使 `<el-input>` 获取焦点的需求[^1]。 --- ### 方法四：在弹窗中实现自动聚焦 对于某些特殊场景（如对话框内的输入框），可能会遇到因多次异步渲染而导致无法正常获取焦点的情况。针对这种情况，推荐使用双层 `nextTick()` 解决方案。 以下是一个完整的例子： ```javascript <template> <el-dialog v-model="dialogVisible" title="提示"> <el-form :model="form"> <el-form-item label="名称"> <el-input ref="dialogInputRef" v-model="form.name"></el-input> </el-form-item> </el-form> </el-dialog> <button @click="openDialog">打开对话框</button> </template> <script setup> import { ref, nextTick } from 'vue'; const dialogVisible = ref(false); const form = ref({ name: '' }); const dialogInputRef = ref(null); function openDialog() { dialogVisible.value = true; nextTick(() => { if (dialogInputRef.value) { nextTick(() => { dialogInputRef.value.focus(); }); } }); } </script> ``` 该方法能够有效应对复杂的生命周期管理问题，尤其是在多级嵌套或延迟渲染的情况下[^2]。 --- ### 总结 以上四种方法分别对应不同的应用场景： - **静态输入框**：可直接使用 `onMounted` 并调用 `focus()`； - **动态输入框**：需配合 `$nextTick()` 确保 DOM 完全加载； - **嵌套结构**：可通过访问底层 DOM 实现强制聚焦； - **弹窗内输入框**：建议采用双重 `nextTick()` 方案以适配复杂情况。 每种方式都有其适用范围，请根据实际业务需求选择合适的解决方案。 --- ####