3

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

我有一个带有 v-btns 的 v-app-bar 来链接到我的不同伪页面，并且希望在按钮处于活动状态时拥有一个自定义类，即它链接到当前显示的页面。使用active-classv-btn，我可以在 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>
4

2 回答 2

2

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

  1. 将no-active类添加到您的组件：
<v-btn active-class="no-active"></v-btn>

或者

<v-chip :to="route" class="no-active">Home</v-chip>
  1. 定义样式（如果您的 SFC 样式有范围，则可能不起作用）
.v-btn--active.no-active::before {
  opacity: 0 !important;
}
于 2021-01-18T02:23:10.980 回答
0

我绕过了与路由匹配的活动类，方法是删除 上的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 })
    }
  }

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

于 2020-12-21T04:33:57.527 回答