Based on vUE framework, Vant component library, mobile search box to achieve automatic focus, using custom instructions

Auto focus of the search box is achieved by global directives

import Vue from 'vue'
// Plug-in object (must have install method, can be injected into vue.use)
export default {
  install () {
    Vue.directive('fofo', {
      inserted (el) {
        fn(el)
      },
      update (el) {
        fn(el)
      }
    })
  }
}
function fn (el) {
  if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
    // If it is the input tag /textarea tag
    el.focus()
  } else {
    // The van-search directive retrives the component root tag div and the input inside the tag
    const inp = el.querySelector('input')
    const textArea = el.querySelector('textarea')
    // If found
    if (inp || textArea) {
      inp && inp.focus()
      textArea && textArea.focus()
    } else {
      // Not in itself, nor in the child tags
      console.error('Please use v-Fofo on the input field label')}}}Copy the code