Question

我想更改活动标签的文本颜色。

使用 Vue.js + Vuetify

我创建了一个 .active CSS 类。有趣的是，活动类的 background-color 属性有效，但文本颜色（颜色）在活动时不会改变。

我应该如何更改代码以便两个属性都适用于活动类？

风格

  .active {

  color: #222222;
  background-color: #ffff;
  }

模板

      <v-tabs
        background-color="#FFFFEA"
        slider-color="#C89933"
        optional
        right
        active-class="active"

        >

        <v-tab
          class="normalize font-weight-bold "
          to="/tab1"
          >
          Tab 1
        </v-tab>          

        <v-tab    
          class="normalize font-weight-bold"
          to="/tab2"
          >
          Tab 2
        </v-tab>   

        <v-tab
          class="normalize font-weight-bold"
          to="/tab3"
          >
          Tab 3
        </v-tab>
  
          
      </v-tabs>

Answer 1

默认颜色来自 Vuetify 组件本身。要覆盖颜色，您可以在颜色值后使用 !important 标志。

    .active {
       color: #222222 !important;
       background-color: #ffff !important;
    }

Answer 2

如果您的所有选项卡都路由到一个 url 链接，您可以在其中检查当前的 $route.name 并确认它是当前活动的。使用三元表达式来选择要呈现的类。执行以下操作。

 <a
          @click="this.$router.push('http://localhost:8081/')"
          href="#"
          class="
            hover:bg-papaDark-700
            text-white
            hover:text-gray-200
           
          "
          :class="$route.name === 'Home' ? 'border-l-6 border-gray-200 ' : ''"
        >

其中“Home”将是“locahost:8081/”的路由组件名称。例如。

告诉我它是否有效

Vue 选项卡更改活动类的文本颜色

2 个答案: