element-ui el-form中的el-input自定义自动获取焦点

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

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

· 1.4k 阅读

1 ·

版权

文章标签：

#elementui #vue.js #javascript

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue项目中创建一个自定义指令`v-focus`，用于使`el-input`组件在页面加载时自动获取焦点。通过在`inserted`钩子中聚焦输入框，实现了这个功能。示例代码展示了在`el-form-item`内的`el-input`组件应用此指令的方式。

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

el-input自定义自动获取焦点

        <el-form-item prop="username">
            <el-input
              v-model.trim="form.username"
              v-focus
              style="margin-top: 20px"
              type="text"
              placeholder="请输入用户名"
              auto-complete="off"
            >
              <vab-icon slot="prefix" :icon="['fas', 'user-alt']"></vab-icon>
            </el-input>
          </el-form-item>

    export default {
    username: 'xxx',
    //使用自定义指令让input获取焦点
    directives: {
      //注册一个局部的自定义指令 v-focus
      focus: {
        inserted(el) {
          el.querySelector('input').focus()
        },
      },
    },