如何从顺序键盘导航中删除Vuetify附加图标

debugcn 发表于 Dev

雷诺·塔内克（Renaud Tarnec）

在带有Vuetify的Vue.js应用程序中，我有一组用v-text-field和定义的密码字段，这些字段具有append-icon以便切换文本可见性，如下所示：

      <v-text-field
        v-model="password"
        :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
        :type="show1 ? 'text' : 'password'"
        @click:append="show1 = !show1"
      ></v-text-field>

它与密码输入的文档示例完全相似（另请参见相应的codepen）。

通过此设置，如果用户使用Tab键在不同的字段之间进行导航（顺序键盘导航），则append-icons将包含在顺序键盘导航中。

我想从顺序键盘导航中排除这些图标（并能够从一个密码字段跳到另一密码字段而无需导航到append-icon）。

标准的方式来做到这一点是分配一个“负值（通常tabindex="-1"）”，它的“是指该元素是不通过顺序键盘导航可达”的，如所解释这里。

但是我找不到如何tab-index仅将值分配给本身append-icon而不分配值v-text-field。

罗伯副总裁

您可以使用v-slot:append图标并将其放置在此处。

<v-text-field v-model="password" :type="show1 ? 'text' : 'password'">
  <template v-slot:append>
    <v-button @click="show1 = !show1" tabindex="-1">
      <v-icon v-if="show1" >mdi-eye</v-icon>
      <v-icon v-if="show1" >mdi-eye-off</v-icon>
    </v-button>
  </template>
</v-text-field>

但是，这并不是因为您可以做到这一点。如果将此按钮放在tabindex触及不到的地方，则具有屏幕阅读器的人可能无法切换该按钮。
考虑到可访问性，此按钮是一个交互式元素，因此应具有tabindex="0"

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。