vue自定義指令實現element中input 自動獲取焦點

項目的一個需求，記錄分享一下，希望幫助別人少踩坑。先簡單說一下需求：左側是tree結構，右側是表單，實現功能就是點擊tree節點，對應的右側input獲取焦點

 

注冊自定義指令

　　指令可以是全局注冊也可以是局部注冊，看你自己的想法嘍，我這塊是實現的全局注冊

　　

  directives: {
    focus: {
      // 綁定判斷
      inserted: function(el, { value }) {
        if (value) {
          el.children[0].focus();
        }
      },
      //更新判斷
      update: function(el, { value }) {
        if (value) {
          el.children[0].focus();
        }
      },
      //更新完成s
      componentUpdated: function(el, { value }) {}
    }
  }

　　！！！非常重點的就是el.children[0]。具體看圖

　　

　　我覺得大家應該明白了，為啥是第一個子元素了，因為element渲染后，結構是div包着input，你的指令給div是沒有任何效果滴。需要注意這塊

　　邏輯代碼

　　光指令了，沒有邏輯代碼也是不行滴啊，我就順便貼出來吧，反正也不費事請。（保證指令的正常更新，每次只有一個input選中）

　　

  updateFocusStatus(id) {
      let _this = this;
      let children = _this.data[0].children;

      if (children[id].focus) {
        children[id].focus = !children[id].focus;
        return;
      }

      children.map(n => {
        n.id != id ? (n.focus = false) : (n.focus = true);
      });
    },
    handleNodeClick(data) {
      let _this = this;
      console.log(data.id + ":" + data.focus);
      _this.updateFocusStatus(data.id);
    }

　　結尾：希望自己每天都可以進步一點點。努力！