添加全局自动聚焦的Vue自定义功能_vue3 on-focus

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 来自动聚焦啦