时间戳

首页 > 解决方案 > vue组件和tabindex，你是怎么做的？

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

问题描述

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

我的问题在于它动态放置在父表单上时......标签顺序不正常，我的研究似乎表明没有设置 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 的最佳方法有任何想法吗？

标签： htmlvue.jscomponentstabindex

解决方案

您可以将 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>

推荐阅读