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 issue 上找到答案：

将 no-active 类添加到您的组件中：

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

或

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

定义样式（如果您的 SFC 样式有范围，则可能无法使用）

.v-btn--active.no-active::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 })
    }
  }

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

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

2 个答案: