### 方法一：通过 `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="show
Input">
<
el-input ref="dynamic
InputRef"></
el-input>
</div>
<button @click="toggle
Input">切换输入框</button>
</template>
<script setup>
import { ref, nextTick } from '
vue';
const show
Input = ref(false);
const dynamic
InputRef = ref(null);
function toggle
Input() {
show
Input.value = !show
Input.value;
if (show
Input.value && dynamic
InputRef
.value) {
nextTick(() => {
dynamic
InputRef
.value
.focus();
});
}
}
</script>
```
在此情况下，由于 `v
-if` 导致 DOM 可能尚未完全加载，因此需要使用 `nextTick()` 确保操作发生在正确的时机[^4]。
---
### 方法三：解决嵌套结构导致的 autofocus 属性失效
问题
有时，`<
el-input>` 外部可能被额外的容器包裹（如 `<div>`）。这种情况下，即使设置了 `autofocus` 属性也可能
不起作用。这时可以直接调用其内部实例的 `focus()` 方法解决
问题。
代码如下所示：
```
javascript
<template>
<div>
<
el-input ref="nested
InputRef" />
</div>
</template>
<script setup>
import { onMounted, ref } from '
vue';
const nested
InputRef = ref(null);
onMounted(() => {
if (nested
InputRef
.value) {
const
inputEl = nested
InputRef
.value
.get
Input()[0]; // 获取原生
input 元素
inputEl.focus(); // 对原生
input 设置焦点
}
});
</script>
```
这种方法特别适合于复杂布局下强制使 `<
el-input>` 获取焦点的需求[^1]。
---
### 方法四：在弹窗中实现自动聚焦
对于某些特殊场景（如对话框内的输入框），可能会遇到因多次异步渲染而导致无法正常获取焦点的情况。针对这种情况，推荐使用双层 `nextTick()` 解决方案。
以下是一个完整的例子：
```
javascript
<template>
<
el-dialog v
-mod
el="dialogVisible" title="提示">
<
el-form :mod
el="form">
<
el-form
-item lab
el="名称">
<
el-input ref="dialog
InputRef" v
-mod
el="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 dialog
InputRef = ref(null);
function openDialog() {
dialogVisible
.value = true;
nextTick(() => {
if (dialog
InputRef
.value) {
nextTick(() => {
dialog
InputRef
.value
.focus();
});
}
});
}
</script>
```
该方法能够有效应对复杂的生命周期管理
问题，尤其是在多级嵌套或延迟渲染的情况下[^2]。
---
### 总结
以上四种方法分别对应
不同的应用场景：
- **静态输入框**：可直接使用 `onMounted` 并调用 `focus()`；
- **动态输入框**：需配合 `$nextTick()` 确保 DOM 完全加载；
- **嵌套结构**：可通过访问底层 DOM 实现强制聚焦；
- **弹窗内输入框**：建议采用双重 `nextTick()` 方案以适配复杂情况。
每种方式都有其适用范围，请根据实际业务需求选择合适的解决方案。
---
####
扫一扫
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
