vue 멀티 셀렉트의 초점을 맞추고 활성화하는 방법

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>

더블클릭 이벤트에서는 멀티셀렉트 요소가 올바르게 표시되지만 멀티셀렉트에서는 사용자가 클릭해서 열어야 합니다.뜨면 자동으로 열렸으면 좋겠어요.

내가 시도한 것:

• 멀티 셀렉트에 초점을 맞춥니다.
  • tabindex="0"
  • 오토포커스
  • jQuery에서 초점을 맞춘 항목을 선택하려고 하면$(':focus')[0]'정의되지 않음'을 알 수 있습니다.

야!

컴포넌트에 ref를 붙인 후 포커스를 트리거하면 드롭다운이 열립니다.

<multiselect ref="vms" v-bind="yourAttributes" />

그리고 당신이 만든 후크에

this.$refs.vms.$el.focus()

드디어 이 방법을 알게 되었습니다(참조인은 나에게 효과가 없었습니다).

1단계: 잘못된 요소에 초점을 맞추고 있었습니다.

따라서 vue-멀티셀렉트 요소는 다음과 같이 구성됩니다(중요한 부분만 표시).

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

일반적으로는 데이터 저장 공간을tabindex입력에 대해서는, 대신에, 클래스의 부모에게 입력해 주세요.multiselect이것은 jQuery's와 같은 것에도 해당됩니다.focus()그래서...

아니요:$('.multiselect input').focus()

네:$('.multiselect').focus()

스텝 2: 탭 인덱스를 수정합니다.

또 다른 문제는 vue-multicelect가 vue-multicelect의tabindex="-1"총체적으로.multiselect요소들.이렇게 하면 탭 인덱스의 자연스러운 순서에서 삭제되므로 모든 탭 인덱스를 재할당해야 합니다.

마운트 및 업데이트 시(필요한 경우) 모든 탭 인덱스를 재할당하기 위한 코드가 필요합니다.

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);
            }
        });
    });
}

가장 간단한 솔루션 - [Vue Multiselect]드롭다운 전환

Vue Multiselect에서는 2개의 이벤트(@open, @close)를 사용할 수 있으며 멀티 셀렉트에서는 다음과 같이 참조할 수 있습니다.

ref="multiselect"

안에 가두다

data(){
  isOpen: false
}

다음으로 2개의 이벤트에 추가합니다.

 @close="isOpen = false"
 @open="isOpen = true"

방법을 사용하다

 toggle() {
            if (this.isOpen) {
                this.$refs.multiselect.$el.blur()
                this.isOpen = false
            } else {
                this.$refs.multiselect.$el.focus()
                this.isOpen = true
            }
        }

언급URL : https://stackoverflow.com/questions/51214171/how-to-focus-and-activate-a-vue-multiselect