Vue 中使用input和el-input自动获取焦点的问题

最新推荐文章于 2025-05-14 18:20:34 发布

名字忘了能挂失吗

最新推荐文章于 2025-05-14 18:20:34 发布

阅读量3.5k

点赞数 3

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中通过自定义指令使普通<input>和<el-input>组件自动获取焦点。首先，在入口文件注册全局自定义指令，然后在组件中使用该指令即可实现自动聚焦的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中，普通<input />和<el-input></el-input>自动获取焦点可以使用自定义指令来实现。

1、先在入口文件中注册一个全局自定义指令

// main.js
Vue.directive('focus', {
  // 当被绑定的原色插入到DOM中时
  inserted (el, binding, vnode) {
    // 聚焦元素
    el.focus()
  }
})

语法格式：Vue.directive(’ 自定义指令名称 '，{ } )

2、在组件中使用（v- + 指令名）

// index.vue
<input v-focus placeholder="我有自定义的v-focus,所以我聚焦了" />

3、效果实现
加载和刷新时都会聚焦

1、和普通的输入框用法一样

// main.js
Vue.directive('fo', {
  inserted (el, binding, vnode) {
    // 聚焦元素
    el.querySelector('input').focus()
  }
})

注：el-input在页面渲染后，外层是个div，需要拿到里面的input才会有效果

2、在组件中使用（v- + 指令名）

// index.vue
<el-input v-fo placeholder="我有v-fo,所以我可以自动聚焦"></el-input>

3、实现效果

小试牛刀，不喜勿喷。