vue组件和tabindex，你是怎么做的？

Posted 2023-02-23

【中文标题】vue组件和tabindex，你是怎么做的？

【英文标题】：vue components and tabindex, how do you do it?

【发布时间】：2020-08-13 00:05:06

【问题描述】：

我有一个自定义视图组件，它呈现为三个选择列表，“年份”、“制造”和“型号”，它对我来说效果很好。

当它被动态放置在父表单上时，我的问题出在...标签顺序不正常，我的研究似乎表明没有设置 tabindex 是正常的。

假设我有这样的事情：

<input type="text" v-model="name" tabindex="1">
<my-widget v-if="someCondition"> </my-widget>
<input type="text" v-model="shop" tabindex="5">

如何告诉 myWidget 将我的小部件内的选择的 tabindex 设置为 2、3、4？ 理想情况下，我希望能够在同一页面上使用其中的两个小部件，这样硬编码就不起作用了。

有人对在组件内分配 tabindex 的最佳方式有任何想法吗？

【参考方案1】：

您可以将 tabindex 作为 my-widget 组件上的道具，以便它可以是动态的。例如

我的小部件组件

<template>
    <div>
        <input type="text" :tabindex="tabindex"/>
        <input type="text" :tabindex="tabindex + 1"/>
    </div>
</template>

<script>
   export default 
      props: 
         tabindex: 
             type: Number,
             required: false,
             default: 1
         
   
</script>

所以你的代码看起来像

<input type="text" v-model="name" tabindex="1">
<my-widget v-if="someCondition"
     :tabindex="2"
> </my-widget>
<input type="text" v-model="shop" tabindex="5">

如果你添加另一个

<my-widget v-if="someCondition"
     :tabindex="6"
> </my-widget>

【讨论】：

谢谢，我实现了这个，它似乎工作正常。