elementUI中input元件的autofocus屬性不生效

如圖是以：點選航線名字需要切換輸入框，輸入框需要自動聚焦，這樣即使啥也不修改也能執行失焦事件。

elementUI文檔上有一個autofocus屬性，把autofocus設定成true發現并沒有自動擷取焦點。

失效的原因：

autofocus是vue中input的原生屬性,element也支援這種方法,

但是如果el-input元件外面還有其他元件, 就會導緻autofocus失效。

解決辦法：

自定義指令

在全局定義一個自動擷取焦點的自定義指令，在所有元件中都可以使用v-focus來自動擷取焦點。

代碼如下：

在main.js中定義全局指令

Vue.directive('focus', {
  inserted: function(el) {
    el.querySelector('input').focus();
  }
});
           

在單元件中使用：

<el-input
      v-focus  // 自定義指令
      v-if="item.isInput"
      v-model="item.lineName"
      placeholder="請輸入标題"
      @blur="saveTitle(item)" />