添加全局自动聚焦的Vue自定义功能

import Vue from "vue"

// 标签添加自动聚焦的功能
// 用法:

Vue.directive("fofo",{

 inserted(el){

  fo(el)

},

  update (el) { //指令所在的标签被更新时候,触发

  fo(el)
})


function fo (el) {

// el是所在的标签

if(el.nodeName === "INPUT" || el.nodeName === "TEXTAREA") {

// el本身的标签名就是input或者是textarea

el.focus()

}else {

// 如果不是就往下在找找调用focus()

const input = el.querySelector("input")

const textarea = el.querySelector("textarea")

 if (input || textarea) {

        input && input.focus()

        textarea && textarea.focus()
}else {

console.log("请把v-fofo放在输入框标签上")

}

1.自定义节点在src/utils/directives.js中书写以上代码

2.在main.js中import "@/utils/directives.js"

3.在你想自动聚焦的input或者textarea上就可以使用 v-fofo 来自动聚焦啦