Javascript 如何从顺序键盘导航中删除Vuetify append图标

在带有Vuetify的Vue.js应用程序中，我使用

v-text-field

定义了一组密码字段，并使用

append图标来切换文本可见性，如下所示：

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



它完全类似于（另请参见相应的）

通过此设置，如果用户使用
选项卡
键在不同字段间导航（顺序键盘导航），则顺序键盘导航中将包含
附加图标
s

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

标准方法是指定一个“负值（通常为
tabindex=“-1”
”），这意味着“无法通过顺序键盘导航访问元素”，如前所述

但是我找不到如何将
选项卡索引
值仅分配给
附加图标
，而不分配给
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>


mdi眼
注意

然而，这不是因为你能做到这一点，你应该。
如果将此按钮放置在tabindex之外，则具有屏幕阅读器的用户可能无法切换此按钮。

从可访问性的角度来看，此按钮是一个交互式元素，因此应该具有
tabindex=“0”
同样适用于我的是只为所有元素分配tabindex。此时将忽略附加图标

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


提交