如何在 vue.js 中的图像组件等按钮上按 Tab 键焦点

Question

我的vue.js应用程序中有以下template：

<div>
<button class="button_text" @click="reset">Reset</button>
<button class="button_text">Search</button>
<image-component class="button_image_icon"/>
</div>

我正在尝试将选项卡焦点设置在<image-component>上，该不是<button>而是Component，<span>内有label和input。它可以轻松地将焦点设置在按钮上，但不确定如何在图像图标等按钮上执行此操作。

试过：@click="setFocus"，没用。

Answer 1

您应该能够通过向所有元素添加tabindex属性来实现它

<div>
<button class="button_text" @click="reset" tabindex="1">Reset</button>
<button class="button_text" tabindex="2">Search</button>
<image class="button_image_icon" tabindex="3" />
</div>

使用 javascript 手动设置焦点的示例：https://jsfiddle.net/qeugo6hm/5/