如何聚焦和激活 vue 多选?

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>

双击事件显示多选元素正常，但多选仍需要用户单击它才能打开。我希望它在出现后自动打开。

我尝试过的事情：

• 聚焦多选：
  • 标签索引="0">
  • 自动对焦
  • 当我尝试在jQuery中选择焦点项目时，$(':focus')[0]，我得到"未定义">

Answer 1

Heyo！

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

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

然后在您创建的钩子中添加

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

Answer 2

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

你可以在 VueMultiselect 上使用 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
}
}

Answer 3

终于想出了如何做到这一点(ref 对我不起作用(：

第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 步：更正选项卡索引。

另一个问题是当 vue-multiselect 对所有.multiselect元素进行tabindex="-1"时。这会将它们从 tabindex 的自然顺序中删除，因此您需要重新分配所有 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);
}
});
});
}