[JavaScript知识库]自定义 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()
    }
  })
}