[JavaScript知识库]vue中封装自动聚焦指令

自定义指令官方文档

1.utils/directives.js, 定义全局自定义指令插件

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()
      }
    })
  }
}

2.引入到main.js注册

import diretivesObj from '@/utils/directives'
Vue.use(diretivesObj)

3.去van-search上使用

<!-- 搜索组件 -->
<van-search v-fofo placeholder="请输入搜索关键词" />