我自己封装的全局指令(输入框自动获取焦点)

情况1：对象+install方法

const directiveObj = {
    install(Vue){
        //vue函数相当于import Vue from 'vue'
        console.log(Vue)
        // 全局指令的方法
        Vue.direvtive('fofo',{
            inserter(el){
                //el是原生的div标签
                //往里获取到input
                el.quertSelector('input'.focus())
            }
        })
    }
}

export defaule directiveObj

情况2：导出的函数（不是对象+install方法）(推荐)

// 自动获取焦点
export default function (Vue) {
  Vue.directive('fofo', {
    // 指令所在标签, 插入到真实DOM时, 才触发
    inserted (el) {
      // van-search组件封装一套div里包含input
      // el是原生的div标签
      // 往里获取到input
      // JS触发标签事件, 直接.事件名()\
      if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
        el.focus()
      } else {
        // el不是输入框, 尝试往里查找
        const inp = el.querySelector('input')
        const textA = el.querySelector('textarea')
        if (inp) {
          inp.focus()
        }
        if (textA) {
          textA.focus()
        }
      }
    },
    // 指令所在标签, 发生更新时触发, (例如: display:none隐藏->出现)
    update (el) {
      if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
        el.focus()
      } else {
        // el不是输入框, 尝试往里查找
        const inp = el.querySelector('input')
        const textA = el.querySelector('textarea')
        if (inp) {
          inp.focus()
        }
        if (textA) {
          textA.focus()
        }
      }
    }
  })
}

情况3：main.js全局注册

Vue.directive('fofo', {
  inserted (el) {
    el.querySelector('input').focus()
  }
})