如何在 Vuetify 中覆盖 v-btn 活动类？

Question

我正在使用 Vue.js 2.6.10n 以及 Vuetify 2.1.0 和 vue-router 3.1.3 开发一个网站。

我有一个带有 v-btns 的 v-app-bar 来链接到我的不同伪页面，并且希望在按钮处于活动状态时有一个自定义类，即它链接到当前显示的页面。使用 v-btn 的

active-class

，我可以在 Vuetify 默认值的“顶部”添加样式，但不能完全覆盖它。

我怎样才能完全摆脱默认的活动类？

我的目标只是让 btn 文本在活动时带有下划线，并摆脱默认的“按下按钮”样式。

这是我的代码示例：

<template>
<v-btn
        to="/"
        active-class="active"
        text
        class=" white--text display-1 logo"
        >HOME</v-btn>
.
.
.
</template>
<style lang="scss" scoped>
.active {
  border-bottom: solid;
  border-color: yellow;
}
</style>

Answer 1

要摆脱 vuetify 组件上按钮按下的活动状态，请在此 github 问题中找到答案：

1. 将

   no-active

   类添加到您的组件中：

<v-btn active-class="no-active"></v-btn>

或

<v-chip :to="route" class="no-active">Home</v-chip>

2. 定义样式（如果您的 SFC 样式有范围，则可能不起作用）

.v-btn--active.no-active::before {
  opacity: 0 !important;
}

如果您想保留悬停突出显示功能 - 使用此选择器：

.v-btn--active.no-active:not(:hover)::before {
  opacity: 0 !important;
}

对于作用域样式 - 使用 深度选择器

Answer 2

我通过删除

to="/"

上的

v-btn

支柱并更改按钮上的 @click 事件来调用函数并推送到路线，从而绕过了与路线匹配的活动类。似乎路由器不再与按钮上的

to

属性匹配，因此它不知道应用活动类。

html:

    <v-btn
        text
        color="primary"
        @click.stop="router.push({ name: 'myRouteName' })"
      >
</v-btn>

js:

  routeTo(routeName: string) {
    if (this.$router.currentRoute.name != routeName) {
      this.$router.push({ name: routeName })
    }
  }

请注意，我检查新路线名称与当前路线名称不匹配，以避免重复导航错误。

Answer 3

对于任何遇到这个问题的人，我都无法让

active-class="no-active"

工作。我所做的是：

<v-btn-toggle v-model="selectedButton">

然后只需设置

selectedButton: number | undefined = 10

（只是超出 v-btn-toggle 内按钮数量范围的数字。

之后我将相同的 v 模型添加到

<v-btn>

中的

v-btn-toggle

。

向

selectedButton

添加了一个监视，每次更改时将其设置为未定义。为我做了这个伎俩。

Answer 4

所以你知道，现在有一种更快的方法来禁用 v-btn 上的活动状态：

<v-btn :active="false">

这里提到： https://github.com/vuetifyjs/vuetify/issues/8172

KaelWD 在 2022 年 9 月 15 日添加了引用此问题的提交 @凯尔WD feat(VBtn)：继承活动路由状态…… b1b1740 可以用

:active="false"

来阻止，与 VListItem

相同