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

在使用 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 代替，即可解决这个问题，同时，这个引入指令的方法，可以实现指令模块化封装，方便扩展其他指令。