Как сфокусировать и активировать мультивыбор vue?

Question

Как сфокусировать и активировать мультивыбор vue?

Когда пользователь дважды нажимает на это:

<div 
  class="open-select" 
  v-if="!editable" 
  @dblclick="editable=true">{{ name }} 
</div>

Я бы хотел, чтобы этот <multiselect v-else v-model = "name": options = "names" track-by = "id" tabindex = "0" autofocus @ select = "editable = false"> </ multiselect> to быть открытыми и целенаправленными:

$(':focus')[0]

Событие двойного щелчка показывает, что элемент multiselect отлично, но для многоселектора все еще требуется щелкнуть его, чтобы открыть. Я бы хотел, чтобы он автоматически открывался после появления.

Вещи, которые я пробовал:

фокусируя мультиспектр:
- <multiselect ref = "vms" v-bind = "yourAttributes" /> = "0"
- автофокусировка
- Когда я пытаюсь выбрать сфокусированный элемент в jQuery this.$refs.vms.$el.focus() , я получаю 'undefined'

vuejs2,

0

Ответов: 2

vuejs2,

Похожие вопросы

score 0 · Accepted Answer

0

Heyo!

Вы можете поместить ref на компонент, а затем вызвать фокус, который откроет выпадающий список.

<div class="multiselect"> // <= This is the element to focus on
  <div class="multiselect__tags">
    <input>               // <= Not the input
  </div>
</div>

А затем в созданном вами крюке вы добавляете

tabindex

score -1 · Accepted Answer

-1 принято

Наконец выяснилось, как это сделать (ref не работает для меня) :

ШАГ 1: Я фокусировался на неправильном элементе.

Таким образом, элемент vue-multiselect структурирован таким образом (сокращение только для отображения важных частей):

multiselect

Обычно вы хотите поместить свой tabindexвход, вместо этого вы должны поместить его в родительский класс multiselect. Это также касается таких вещей, как jQuery focus(). Так...

Нет: $('.multiselect input').focus()

Да: $('.multiselect').focus()

ШАГ 2: Исправление tabindex.

Другая проблема заключается в том, что vue-multiselect ставит tabindex="-1"на все .multiselectэлементы. Это удаляет их из естественного порядка tabindexes, поэтому вам нужно переназначить все tabindexes:

В смонтированном и обновленном (если необходимо) коде необходимо переназначить все tabindexes:

mounted: function() {
    $(document).ready(()=>{

        // you may need to delete all tabindexes first.
        $('[tabindex]').each( (i,v) => {
            $(v).removeAttr('tabindex');
            return true;
        });

        // add new tabindexes
        $('input, textarea, button').each(( i,v ) => {
            var isMultiSelect = $(v).hasClass('multiselect__input');

            if(isMultiSelect){
                $(v).parents('.multiselect:first').attr('tabindex', i + 1);
            else{
                $(v).attr('tabindex', i + 1);
            }
        });
    });
}