自定义 vue 指令：搜索框自动聚焦

全局注册指令方法：   文件路径：./utils/directive

vue.directive(‘自定义名’,

{inserted(el){ // el是原生的div标签

el.querySelector('input').focus//标签选择器

// 往里获取到input
// JS触发标签事件, 直接.事件名()

   el.querySelector('input').focus()

}})

在mian.js 中引入，全局使用 

import diretvieObj from './utils/directive'

Vue.use(diretvieObj)

 封装全局指令 

// 情况1: 对象+install方法
const directiveObj = {
  install (Vue) {
    // Vue函数相当于import Vue from 'vue'
    console.log(Vue)
    // 全局指令的方法
    Vue.directive('fofo', {
    // 指令所在标签, 插入到真实DOM时, 才触发
      inserted (el) {
      // van-search组件封装一套div里包含input
      // el是原生的div标签
      // 往里获取到input
      // JS触发标签事件, 直接.事件名()
        el.querySelector('input').focus()
      }
    })
  }
}
export default directiveObj
// 情况2: 导出的函数(不是对象+install方法)
export default function (Vue) {
  Vue.directive('fofo', {
    // 指令所在标签, 插入到真实DOM时, 才触发
    inserted (el) {
      // van-search组件封装一套div里包含input
      // el是原生的div标签
      // 往里获取到input
      // JS触发标签事件, 直接.事件名()
      el.querySelector('input').focus()
    }
  })
}

------------------------------------------------------------------------------------------------------------------------

export default function (Vue) { // 自定义指令 v-fofo 在main.js中全局使用
  Vue.directive('fofo', {
    // 指令所在标签插入到真实dom时触发一次 （新建时触发）
    inserted (el) {
      if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
        el.focus()
      } else if (el.querySelector('input') || el.querySelector('textarea')) {
        el.querySelector('input').focus()
      } else {
        (
          console.log('没有找到标签')
        )
      }
    },

    // 指令所在标签更新时触发指令
    updated (el) {
      if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
        el.focus()
      } else if (el.querySelector('input') || el.querySelector('textarea')) {
        el.querySelector('input').focus()
      } else {
        (
          console.log('没有找到标签')
        )
      }
    }
  })
}