el-input获得焦点事件

### el-input 组件获得焦点事件的使用方法 在 Vue 和 Element UI 中，`el-input` 组件可以通过多种方式处理获得焦点事件。一种常见的方式是在组件上监听 `focus` 事件并执行相应的逻辑。 #### 方法一：直接监听 focus 事件 可以直接在 `<el-input>` 上添加 `@focus` 属性来监听聚焦事件： ```html <template> <div> <!-- 直接监听 focus 事件 --> <el-input @focus="handleFocus"></el-input> </div> </template> <script> export default { methods: { handleFocus(event) { console.log('Input focused:', event.target); } } } </script> ``` 这种方法简单直观，在用户点击输入框时会触发 `handleFocus` 函数[^1]。 #### 方法二：结合 ref 获取焦点 对于需要手动控制何时让输入框获取焦点的情况，可以在创建好对应的 DOM 结构之后利用 `$refs` 来操作 DOM 元素的方法如 `focus()`: ```html <template> <div> <el-button @click="setFocus">设置焦点</el-button> <el-input ref="myInput"></el-input> </div> </template> <script> export default { methods: { setFocus() { this.$refs.myInput.focus(); } } } </script> ``` 此代码片段展示了如何通过按钮点击使指定的 `el-input` 输入框自动获取焦点。 #### 方法三：自定义指令实现自动获取焦点 另一种优雅的做法是使用 Vue 的自定义指令特性来自动生成具有初始焦点状态的输入字段。这特别适用于页面加载完成后立即希望某些特定区域得到用户的注意的情形。 ```javascript import Vue from 'vue'; // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { inserted(el) { el.focus(); } }); ``` 随后可在任何地方轻松应用这个新指令而无需额外编码： ```html <!-- 自动获取焦点 --> <el-input v-focus></el-input> ``` 这种方式不仅简化了代码结构还提高了可读性和维护性[^2]。 #### 特殊情况下的焦点管理 当涉及到模态对话框（例如由 `el-dialog` 提供）内的表单控件时，则可能遇到一些挑战因为这些元素通常不是立刻渲染出来的而是按需显示。因此在这种场景下建议采用异步更新策略确保正确的时间点去请求焦点。 ```html <template> <el-dialog :visible.sync="dialogVisible"> <input ref="innerInput"/> </el-dialog> </template> <script setup> import { ref, onMounted, nextTick } from 'vue'; const dialogVisible = ref(false); onMounted(() => { nextTick().then(() => { nextTick().then(() => { innerInput.value?.focus(); }); }); }) </script> ``` 上述例子中两次调用了 `nextTick()` 是为了让浏览器有足够时间完成所有必要的布局计算后再尝试给内部的 `<input>` 设置焦点[^4]。