使用Vue封装自动聚焦的全局自定义指令

1. 需求 :

•   当页面有输入框时,切换到当前页面时,输入框自动聚焦

 2. 思路 : 

• 通过inserted钩子函数中的形参el指向绑定指令的DOM元素
• 由于我们可能使用第三方组件库 , 需要用nodeName属性判断一下当前元素是否为输入框
• 当组件更新时 , 通过update钩子函数来检测

 3. 具体代码实现:

Vue.directive('fofo', {
  inserted(el) { // 指令所在标签, 被插入到真实DOM触发一次(仅触发一次)
    fofo(el)
  },
  update(el) { // 指令所在标签被更新时触发
    fofo(el)    
})


function fofo(){
  if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
      el.focus()
    } else {
      el.querySelector('input').focus()
    }

}