vue封装自动聚焦指令

1、在src\directive\index.js中封装自动聚焦指令代码

// 文本域的自动聚焦封装的指令
import Vue from 'vue'

// 注意：需要在main.js中导入
Vue.directive('focus', {
  // 当指令所在DOM元素插入到了DOM中，只触发一次
  // 当被绑定的元素插入到 DOM 中时
  inserted (el) {
    focus(el)
  },
  // 当指令所在组件数据发生改变的时候，都会触发
  update (el) {
    focus(el)
  }
})
function focus (el) {
  /* el的作用点
     1. 如果聚焦(focus)指令用在了原生标签上,el就是原生DOM对象
     2. 如果聚焦(focus)指令用在了组件上(自定义标签),el就是当前组件的根元素(root element)
    */

  // 判断1：el就是input或文本域 - 通过标签名判断
  if (['INPUT', 'TEXTAREA'].includes(el.tagName)) { // 如果标签名不存在于该数组中
    el.focus()
    return
  }

  // 判断2：el不是input或文本域,尝试找它的子元素有没有input或文本域。
  // 2.1 有的话, 让找到的子元素聚焦。
  let node = el.querySelector('input')
  if (node) {
    node.focus()
    return
  }
  node = el.querySelector('textarea')
  if (node) {
    node.focus()
    return
  }
  // 2.2 否则, 直接报错。
  throw new Error('聚焦指令用错位置啦！')
}

2、在main.js中引入

import './directive'

3、在需要的页面中直接使用v-focus即可

<textarea v-model.trim="content" v-focus placeholder="友善评论、理性发言、阳光心灵" @blur="blurFn"></textarea>