vue封装获取焦点的自定义指令

vue封装获取焦点的自定义指令

创建工具文件 写入以下代码

import Vue from 'vue'
// 标签添加自动聚焦功能
// 口诀: 当你要给标签扩展额外功能时, 自定义指令
// 用法:
Vue.directive('fofo', {
  inserted (el) { // 指令所在标签, 被插入到真实DOM触发一次(仅触发一次)
    fo(el)
  },
  update (el) { // 指令所在标签被更新时, 触发
    fo(el)
  }
})

function fo (el) {
// el指令所在的标签
  if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') { // el本身的标签名就是input/textarea就直接调用focus
    el.focus()
  } else { // 如果本身不是, 就试着往里获取下在调用focus
    el.querySelector('input').focus()
  }
}

在main里面导入执行即可

import '@/utils/directives'

使用的时候 直接给标签添加自定义指令

v-fofo