如何在 Vuetify 中删除 v-tab 过渡幻灯片？

Question

单击时是否可以删除过渡幻灯片v-tabs？

 <v-tabs v-model="tab" :transition="false" :reverse-transition="false">
        <v-tab href="#tab1" >
          tab1
        </v-tab>
        <v-tab href="#tab2">
          tab2
        </v-tab>
      </v-tabs>

这不起作用

Answer 1

当您将 :transition=false 与 v-tab-item 一起使用时可能：

<v-tabs v-model="tab">
  <v-tab key="registration">Registration</v-tab>
  <v-tab key="login">Login</v-tab>
  <v-tabs-items v-model="tab">
     <v-tab-item key="registration" :transition="false">
        some content
     </v-tab-item>
     <v-tab-item key="login" :transition="false">
        some content
     </v-tab-item>
  </v-tabs-items>
</v-tabs>

不幸的是：transition =“false”在v-tabs级别不起作用（“vuetify”：“2.4.0”）

Answer 2

在您的 scss 样式标签中写入以下内容：

.v-tabs {
  ::v-deep {
    .v-tabs-slider-wrapper {
      transition: none;
    }
  }
}