Vue 2&ElementUIバックグラウンド管理のinputで焦点を当てる

3079 ワード
vue
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要素ではないため、コンポーネント内のオリジナルinputを特定し、inputのfocusメソッドを呼び出してフォーカスを得るためにコンポーネントのclassとtag名を入力する必要がある.
使用する場合、2つのケースに分けられます
ページにfocusコマンドを使用するコンポーネントは1つしかありません
<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。

参考資料:
[1] : https://cn.vuejs.org/v2/guide/custom-directive.html
Vue-時間間隔表示時間の選択
vueインスタンスのコンポーネント開発:マルチタグ切替コンポーネント/tabs切替コンポーネント