el-input 自动聚焦
时间: 2023-09-02 20:11:28 浏览: 69
要实现el-input自动聚焦的功能,你可以使用自定义指令(v-focus)来实现。首先,在el-input标签中添加v-focus指令,如下所示:
```html
<el-input v-focus></el-input>
```
然后,在export default中的directives属性下注册一个局部的自定义指令v-focus,具体代码如下所示:
```js
directives: {
v-focus: {
inserted: function (el) {
el.querySelector('input').focus();
}
}
}
```
这段代码的作用是在el-input元素被插入到DOM中时,自动将焦点设置在input元素上,实现自动聚焦的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-input自动获取焦点功能](https://blog.csdn.net/qq_42808095/article/details/125979652)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [【JavaScript源代码】element input输入框自动获取焦点的实现.docx](https://download.csdn.net/download/mmoo_python/72013073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [让element-ui的输入框聚焦的4种方式](https://blog.csdn.net/Start2019/article/details/106286346)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]