使用指令解决 ElementUI autofocus 失效问题

最新推荐文章于 2024-03-26 09:48:13 发布

子非吾

最新推荐文章于 2024-03-26 09:48:13 发布

阅读量1k

点赞数

分类专栏： VUE Web前端文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq940390/article/details/122338310

版权

VUE 同时被 2 个专栏收录

2 篇文章

订阅专栏

Web前端

2 篇文章

订阅专栏

当ElementUI的autofocus属性失效时，可以使用自定义Vue指令v-focus来实现输入框自动聚焦。创建一个名为focus的指令模块，包含在directives目录下，然后在main.js中引入并注册。在需要自动聚焦的el-input元素上使用v-focus，即可解决该问题。这种方法不仅解决了autofocus失效，还实现了指令的模块化封装，便于扩展。

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

在使用 ElementUI autofocus 的时候，会有失效的时候，参考网上的方法，可以使用指令方便的解决这个问题，使用方法示例：

<el-input v-model="name" autocomplete="off" v-focus></el-input>

仅使用 v-focus 就可以解决这个问题，具体方法如下：

在 src 目录下创建目录 directives ，然后创建 index.js 文件，内容如下：

const modulesFiles = require.context("./", true, /index.js$/)

// 自动导入 当前目录的子目录下的 index.js
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    let moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1")
    const value = modulesFiles(modulePath)
    const pattern = new RegExp(/(\w+)\//i)
    const match = moduleName.match(pattern)
    if (match) {
        moduleName = match[1]
    }
    modules[moduleName] = value.default
    return modules
}, {})

export default {
    install(Vue) {
        for (let name in modules) {
            Vue.directive(name, modules[name])
        }
    }
}

然后在 main.js 中引入：

import Vue from "vue"
import Directive from './directives/index'

Vue.use(Directive)

下面创建 focus 指令，在 directives 下创建 focus 目录，并创建 index.js 文件，内容如下：

export default {
    //组件插入时
    inserted: function(el) {
        el.querySelector("input").focus()
    },
}

这样一来，原来需要 autofocus 的地方，使用 v-focus 代替，即可解决这个问题，同时，这个引入指令的方法，可以实现指令模块化封装，方便扩展其他指令。