如何在Vuetify 3中禁用VTabs组件的滑动切换功能？

在Vuetify 3里，负责内容区域滑动切换的是<v-window>组件，你可以通过以下两种方式禁用滑动功能：

方法1：使用v-window的内置属性 #

直接给<v-window>添加touch="false"属性，就能禁用触摸滑动切换：

<v-card>
  <v-tabs v-model="twoTabs">
    <v-tab value="tab1">Tab One</v-tab>
    <v-tab value="tab2">Tab Two</v-tab>
  </v-tabs>
  <v-window v-model="twoTabs" touch="false"> <!-- 添加touch属性 -->
    <v-window-item value="tab1">
      <v-card>
        <v-card-text>Tab One Text</v-card-text>
      </v-card>
    </v-window-item>
    <v-window-item value="tab2">
      <v-card>
        <v-card-text>Tab Two Text</v-card-text>
      </v-card>
    </v-window-item>
  </v-window>
</v-card>

这个属性是Vuetify 3为v-window提供的专门控制触摸交互的配置，设置为false后就会关闭所有触摸滑动触发的切换行为。

方法2：通过CSS禁用触摸事件 #

如果需要更彻底地禁用整个区域的触摸滑动（比如连卡片本身的滑动也想禁止），可以给目标元素添加自定义CSS类，禁用触摸事件：

<template>
  <v-card class="no-touch"> <!-- 添加自定义类 -->
    <v-tabs v-model="twoTabs">
      <v-tab value="tab1">Tab One</v-tab>
      <v-tab value="tab2">Tab Two</v-tab>
    </v-tabs>
    <v-window v-model="twoTabs">
      <v-window-item value="tab1">
        <v-card>
          <v-card-text>Tab One Text</v-card-text>
        </v-card>
      </v-window-item>
      <v-window-item value="tab2">
        <v-card>
          <v-card-text>Tab Two Text</v-card-text>
        </v-card>
      </v-window-item>
    </v-window>
  </v-card>
</template>

<style>
.no-touch {
  touch-action: none;
  /* 若仅需禁用滑动保留点击，只保留上面一行即可；若要完全禁止触摸交互，可添加下面一行 */
  /* pointer-events: none; */
}
</style>

内容的提问来源于stack exchange，提问作者Lukas Rossa