如何在 vuejs 中修复 v-tabs？答案

【问题标题】：How to make v-tabs fixed in vuejs?如何在 vuejs 中修复 v-tabs？
【发布时间】：2022-08-09 18:41:09
【问题描述】：

无论如何，我们可以修复 v-tabs 吗？到目前为止，我尝试使用 inside v-tab 固定选项卡，但这不起作用，如果有人能帮助我，那就太好了。

       <v-card width=\"40%\" class=\"mb-2\">
            <v-toolbar flat>
                <font-awesome-icon @click=\"cancel\" :icon=\"[\'far\', \'arrow-left\']\"></font-awesome-icon>
                <v-toolbar-title class=\"ml-2\">Show Summary</v-toolbar-title>
                <v-spacer />
                <bn-toolbar-btn type=\"text\" label=\"Cancel\" icon=\"times\" color=\"secondary\" @click=\"cancel\"></bn-toolbar-btn>

                <bn-toolbar-btn
                    type=\"outlined\"
                    right
                    label=\"Save\"
                    @click=\"submit\"
                ></bn-toolbar-btn>
            </v-toolbar>
            <v-divider></v-divider>
            <v-tabs v-model=\"activeTab\" class=\"mb-n2\" background-color=\"transparent\">
                <v-tab ref=\"summaryTab1\" @click=\"activeTab = \'tab1\'\" href=\"#tab1\"> Summary Tab 1</v-tab>
                <v-tab ref=\"summaryTab2\" @click=\"activeTab = \'tab2\'\" href=\"#tab2\"> Summary Tab 2 </v-tab>
            </v-tabs>
            <v-card-text>
                <v-tabs-items touchless v-model=\"activeTab\" style=\"background-color: transparent;\">
                    <v-tab-item key=\"tab1\" value=\"tab1\">
                    ...
                    </v-tab-item>
                    <v-tab-item  key=\"tab2 value=\"tab2\">...
                    </v-tab-item>
                </v-tabs-items>
            </v-card-text>
        </v-card>

任何帮助将不胜感激，因为我没有找到任何合适的方法来解决这个问题。
我没有得到你想要达到的目标，请多解释一下。
@NileshMishra 如您所见，我已将卡片包裹在 v-tab 中。所以我想要选项卡，即 tabOne、tabTwo 作为固定选项卡，类似于固定导航栏
对不起，但我没有得到。你能提供你的完整代码吗？
@NileshMishra 我已经用解释更新了代码。请让我知道这是否有帮助

标签： vuejs2 vuetify.js vuetify-tabs

【解决方案1】：

我尝试使用 CSS，如下所述。我创建了一个名为 activeTabs 的类并将其传递到 v-tabs 中。

.activeTabs {
  position: sticky;
  top: 0;
  z-index: 999;
}

【讨论】：

【解决方案2】：

我能够摆脱我的使用 CSS 来定位元素

  .v-slide-group__prev.v-slide-group__prev--disabled {
    display: none !important;
  }

【讨论】：