vue自定義指令input獲取焦點，及不生效解決辦法

全局注冊

方式一：

1.新建一個js文件，里面寫自定義指令的方法類
2.引入到main.js中，里面注冊全局指令

// 第一步
const focusDirective = {
    inserted(el) {
        el.focus();
    },
}

export default focusDirective

// 第二步 main.js中注冊指令
import Vue from 'vue';
import focusDirective from './focusDirective';

Vue.directive('focus', focusDirective);

使用 :

<a-input v-focus></a-input>

方式二：

1.新建一個js文件，里面寫自定義指令的方法類，並注冊
2.引入到main.js中
// 第一步
import Vue from 'vue';
const focusDirective = {
    inserted(el) {
        el.focus();
    },
}
Vue.directive('focus', focusDirective)

// 第二步 main.js中注冊指令
import './focusDirective';

局部注冊（指的是單個vue組件內注冊）

<template>
    <input type="number v-focus></input>
</template>

<script>
export default {
    data() {},
    directives: {
        focus: {
            inserted(el) {
                el.focus();
            }
        }
    }
}
</script>

• directive參數

• 1、鈎子
  // 只調用一次 指令第一次綁定到元素時觸發
  bind(el, binding, vnode, oldvnode) {}
  // 被綁定元素插入到父節點時調用
  inserted(el, binding, vnode, oldvnode) {}
  // 組件所在的VNode更新時觸發，
  update(el, binding, vnode, oldvnode) {}
  // 指令所在組件的VNode及其子VNode 更新之后觸發
  componentUpdated(el, binding, vnode, oldvnode) {}
  // 只調用一次 指定與元素解綁時觸發
  unbind(el, bingding, vnode, oldvnode) {}
  

  2、參數
  el 指的是所綁定的Dom元素
  el.dataset 指的是元素自定義的參數值，可以修改，可以用來和上面的鈎子函數之前傳遞信息

  bingding 是一個對象
  name: 去掉"v-"及后綴后的名稱
  rawName: 自定義的全部名稱
  express: 是個字符串，展示指令綁定的值value
  value: 指令綁定的值
  arg: 傳給指令的參數，如果沒有傳給指令參數則不會出現此參數

  

   

   

   

   

   自動獲取焦點不生效分析

• 經過打斷點發現,a-input中通過v-focus進來的el參數並非是input元素,而是父級div元素,代碼改成下面就好了

  const focusDirective = {
      inserted (el) {
          if (el.tagName.toLocaleLowerCase() == 'input') {
              el.focus()
          } else {
              if (el.getElementsByTagName('input')) {
                  el.getElementsByTagName('input')[0].focus()
              }
          }
      }
  
  }
  export default focusDirective