如何封装一个vue自定义指令自动获取文本框焦点

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

1.新建一个文件，命名为directive.js，定义全局自定义指令插件

import Vue from 'vue'

2.封装代码：名字可以随意命名，我们根据语义化命名为'focus'

// 全局可以使用自定义指令  `v-focus`

  export default {
      install() {  // 插件对象(必须有install方法, 才可以注入到Vue.use中) 
        Vue.directive('focus', {  // 当被绑定的元素插入到 DOM 中时……
          inserted(el) {  //inserted：被绑定元素插入父节点时调用,一般只执行一次，所以我们在下边使用了update函数
            fou(el)
          },
          update(el) {  //update代表更新或者多次点击仍然会聚焦
            fou(el)
          }
        })

        // 这里我们把获取焦点封装一个函数，根据判断如果是input框或者textarea文本域，直接调用。如果是元素，就往元素里查找再获取。
        function fou(el) {
          if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
            // 判断如果是input/textarea就直接调用focus
            el.focus()
          } else { // 否则就往元素里边找获取
            el = el.querySelector('input').focus() || el.querySelector('textarea').focus()
          }
        }
      }
    }

3.在main.js中引入，并注册全局

import focus from '@/utils/directive.js'

Vue.use(focus)

4.比如去van-search上使用

<!-- 搜索组件 -->
<van-search v-focus placeholder="请输入搜索关键词" background="#007BFF" />

指令定义函数的钩子函数（可选）:

bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。