Element UI Tabs 组件选中标签样式修改 - 如何让选中标签字体变蓝

在 Element UI 的 Tabs 组件中，如何让选中标签的字体变成蓝色？

可以通过为选中的标签添加一个特定的类来改变样式。首先，给选中的标签添加一个类名，比如'active-tab'。然后，在 CSS 中定义这个类的样式，设置字体颜色为蓝色。最后，在点击标签时，将选中的标签添加这个类名。

以下是对代码的修改：

<el-tabs v-model="carouselTypeSelected" :stretch="false" @tab-change="handleClick">
  <el-tab-pane v-for="(item, index) in carouselType" :label="item.dictLabel" :name="index" :key="index">
    <template #label>
      <div class="cat-tab" :class="{ 'active-tab': index === carouselTypeSelected }">
        <span>{{ item.dictLabel }}</span>
      </div>
    </template>
  </el-tab-pane>
</el-tabs>

<style scoped>
.cat-tab {
  min-width: 100px;
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active-tab {
color: blue;
}
</style>

这样，当你点击标签时，被选中的标签的字体颜色就会变成蓝色。