首页点击按钮聚焦el-input

点击按钮聚焦el-input

时间: 2025-01-03 19:36:15 浏览: 65

### 实现点击按钮后使 `el-input` 组件获得焦点为了实现在点击按钮之后让 `el-input` 获得焦点，在 HTML 部分给 `<el-input>` 添加一个 `ref` 属性用于后续操作该 DOM 元素。当用户点击按钮时，调用 Vue 提供的 `$nextTick()` 方法来确保 DOM 已经完成更新再执行回调函数中的代码。 #### 模板部分 ```html <template> <div>  <el-input v-model="inputValue" ref="autoFocus"></el-input>  <el-button @click="handleClick">获取焦点</el-button> </div> </template> ``` #### JavaScript 部分 ```javascript <script setup lang="ts"> import { ref, nextTick } from 'vue'; // 定义输入框绑定的数据模型 const inputValue = ref(''); // 处理按钮点击事件的方法 function handleClick() { nextTick(() => { // 使用 $refs 来访问带有指定 ref 的组件实例并调用其 focus 方法 this.$refs.autoFocus.focus(); }); } </script> ``` 上述代码展示了如何设置一个简单的界面，其中包含了一个可以编辑文本的 `el-input` 和一个用来触发获取焦点行为的按钮。每当用户按下这个按钮的时候就会尝试把光标定位到对应的输入区域中去[^1]。

阅读全文