Element Plus 的 Tabs 标签页如何修改Tab标签字体样式

Element Plus介绍

Element Plus是一个基于Vue.js 3.0的UI库，是Element UI的升级版。它提供了一套漂亮、易于使用和自定义的组件，如按钮、输入框、表格、弹窗、日期选择器等。Element Plus的设计理念注重用户体验和响应式设计，所有组件都可以自适应不同屏幕大小以提供良好的用户体验。 Element Plus还有更好的性能和更好的 API 设计, 它遵循更好的 Reactivity 和 Function API, 并且使用了更符合 Vue.js 用户习惯的 Composition API。

el-tabs组件尝试

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="消费信息" name="0"></el-tab-pane>
    <el-tab-pane label="宽带信息" name="1"></el-tab-pane>
    <el-tab-pane label="意向信息" name="2"></el-tab-pane>
    <el-tab-pane label="订单信息" name="3"></el-tab-pane>
    <el-tab-pane label="处理历史" name="4"></el-tab-pane>
  </el-tabs>
</template>

具体呈现的结果如下：

tab标签文字样式的修改

Tabs 属性和Tab-pane 属性中均未找到标签文字的样式属性，Tab-pane 插槽中有Tab-pane 的标题内容，插槽名label，对上述代码进行改动。

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane name="0">
    	<template #label><span class="my-label">消费信息</span></template>
    </el-tab-pane>
    <el-tab-pane label="宽带信息" name="1"></el-tab-pane>
    <el-tab-pane label="意向信息" name="2"></el-tab-pane>
    <el-tab-pane label="订单信息" name="3"></el-tab-pane>
    <el-tab-pane label="处理历史" name="4"></el-tab-pane>
  </el-tabs>
</template>
<style scoped>
.my-label {
  font-size: 18px;
  font-weight: bold;
  color: red;
}
</style>

修改后的呈现效果如下：

修改成功！