vue全局指令v-infocus 之input框和textarea

第一步,src文件夹下新建directive/index.js

// 全局指令
import Vue from 'vue'

Vue.directive('infocus', {
  inserted(el) {
   // console.log(el.tagName) // DIV
    if (['INPUT', 'TEXTAREA'].indexOf(el.tagName) !== -1) {
      el.focus()
    } else {
      let node = el.querySelector('input')
      if (node) {
        node.focus()
        return
      }
      node = el.querySelector('textarea')
      if (node) {
        node.focus()
        return
      }
      throw new Error('请把infocus指令用在input或textarea上')
    }
  }
})

第二步导入main.js

// 导入全局指令
import './directive'

第三步,使用vue全局指令v-infocus
找个标签,放上v-infocus

另一种单独给input框设置聚焦指令

import Vue from 'vue'
// 插件对象(必须有install方法, 才可以注入到Vue.use中)
export default {
  install () {
    Vue.directive('fofo', {
      inserted (el) {
        // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
        el = el.querySelector('input')
        el.focus()
      }
    })
  }
}

引入main.js

import diretivesObj from '@/utils/directives'

Vue.use(diretivesObj)