vue компонентов и tabindex, для кого вы это делаете? - PullRequest
Новая
       76

vue компонентов и tabindex, для кого вы это делаете?

0 голосов
/ 29 апреля 2020

У меня есть пользовательский компонент представления, который отображает три списка выбора: «Год», «Марка» и «Модель», и он хорошо работает для меня.

Моя проблема заключается в том, что она динамически помещается в родительскую форму ... Порядок табуляции не в порядке, и мое исследование, похоже, показывает, что это нормально без набора 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 Ответ

0 голосов
/ 29 апреля 2020

Вы можете использовать tabindex в качестве опоры для вашего компонента my-widget, чтобы он мог быть динамическим c. Например,

компонент 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>
...