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

Question

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

当它被动态放置在父表单上时，我的问题就出现了...制表符顺序乱七八糟，我的研究似乎表明没有设置 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 将我的小部件内 select 的 tabindex 设置为 2,3,4？理想情况下，我希望能够在同一页面上使用其中两个小部件，这样硬编码就无法工作了。

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

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

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

vue components and tabindex, how do you do it?

html

components

tabindex

vue.js