代码之家  ›  专栏  ›  技术社区  ›  Travis Heeter

如何聚焦和激活Vue多重选择?

  •  0
  • Travis Heeter  · 技术社区  · 6 年前

    当用户双击时:

    <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>
    

    双击事件显示多选择元素fine, 但多重选择仍然需要用户单击它才能打开。

      • $(':focus')[0]
    2 回复  |  直到 6 年前
        1
  •  2
  •   rudden    6 年前

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

    this.$refs.vms.$el.focus()
    
        2
  •  -1
  •   Travis Heeter    6 年前

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

    tabindex multiselect focus()

    $('.multiselect input').focus()

    $('.multiselect').focus()

    tabindex="-1" .multiselect

    mounted updated

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