在Vue中要給input設定焦點，需要註冊自定義指令。

Vue.directive('focus', function (el, option) {
        var defClass = 'el-input', defTag = 'input';
        var value = option.value || true;
        if (typeof value === 'boolean')
            value = { cls: defClass, tag: defTag, foc: value };
        else
            value = { cls: value.cls || defClass, tag: value.tag || defTag, foc: value.foc || false };
        if (el.classList.contains(value.cls) && value.foc)
            el.getElementsByTagName(value.tag)[0].focus();
});
 

由於ElementUI中的el-input是一個自定義元件，並非input元素，所以需要傳入元件的class和tag名稱來定位元件內的原生input，並呼叫input的focus方法來獲得焦點。

使用的時候，分兩種情況

頁面中只有一個元件用到focus指令

<el-input v-focus="true"></el-input>

頁面中有多個元件用到focus指令

此時，需要傳入class和tag來定位具體的元素

<el-input-number v-focus="{ cls: 'el-input-number',tag: 'input', foc: focus.count }"  v-on:blur="focus.count=false"></el-input-number>
 

補充說明：

在實際用focus指令的過程中，需要給元素新增blur事件： v-on:blur="focus.count=false"。失去焦點後一定要把focus指令對應的變數置為false，否則會導致一些不可控的bug。

參考資料：