vue组件和tabindex，您是谁做的？

Question

我有一个自定义视图组件，它呈现为三个选择列表，分别是“年份”，“制作”和“模型”，并且对我来说效果很好。

我的问题在于将其动态放置在父窗体上时...制表符顺序不合时宜，我的研究似乎表明没有设置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的最佳方法有想法吗？

Answer 1

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

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>