Question

当用户双击时：

<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]中选择重点项目时，我得到了'undefined'

Answer 1

Heyo！

您可以在组件上放置一个引用，然后触发焦点，这将打开下拉列表。

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

然后在创建的挂钩中添加

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

Answer 2

最简单的解决方案 - 切换 Vue 多选下拉

您可以在 VueMultiselect 上使用 2 个事件（@open、@close）多选中的anda ref 喜欢

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

Answer 3

最后弄清楚了该怎么做（对我不起作用）：

步骤1：我专注于错误的元素。

因此，vue-multiselect元素的结构如下（仅显示重要部分的缩写）：

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

通常，您要将tabindex放在输入上，而应该将其放在multiselect类的父级上。这也适用于jQuery的focus()之类的东西。所以...

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

是：$('.multiselect').focus()

步骤2：更正tabindex。

另一个问题是，当vue-multiselect在所有tabindex="-1"元素上放置.multiselect时。这会将它们从tabindex的自然顺序中删除，因此您需要重新分配所有tabindex：

在mounted和updated（如有必要）中，您需要代码来重新分配所有tabindex：

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多重选择？

3 个答案: