【Vue】设置el-tabs，el-tab-pane字体颜色大小

ZBY520312024-11-21 8:53

前言

好久不见！真的是很久很久啦！本来开了个新专栏（收费的，又穷了我，好想赚钱啊）可是又忙又懒，写了好几篇草稿，但是都不满意，导致一直没发，最近很忙，主要现在项目太多啦！前端后端一起搞，我我我！真的，又菜又厉害~

正文

今日问题：如何在Vue Element-ui的el-tabs组件中，实现切换时，改变字体颜色大小效果！

复制代码

<template>
  <el-tabs type="border-card">
    <el-tab-pane label="User">User</el-tab-pane>
    <el-tab-pane label="Config">Config</el-tab-pane>
  </el-tabs>
</template>

效果很好，我很满意！！！

用户一看：不行！字体太小了，看不见；没有颜色，我要五彩斑斓的黑；我要绚烂的特效，这样变大那样变小。我...我当然是：好的，收到！

复制代码

<template>
  <div class='my-tabs'>
    <el-tabs type="border-card">
      <el-tab-pane label="User">User</el-tab-pane>
      <el-tab-pane label="Config">Config</el-tab-pane>
    </el-tabs>
  </div>
</template>

来个div 定个class='my-tabs'（为什么要这样？不能直接改el-tabs咩！呜呜呜~ 我不行，有点菜）

复制代码

<style scoped>

/*设置固定高度*/
.my-tabs >>> .el-tabs__header {
  height: 40px;
}
/*因为每个tab样式不一样，所以用了id写样式*/
.my-tabs >>> #tab-first {
  background: #f8f9fa;
  font-size: 15px;
  color: #4796f0;
  height: 40px;
  line-height: 40px;
}
/*.is-active点击选择tab按钮样式*/
.my-tabs >>> #tab-first.is-active {
  background: rgba(161, 100, 100, 0.87);
  font-size: 20px;
  color: cornsilk;
  height: 40px;
  line-height: 40px;
}

.my-tabs >>> #tab-second {
  background: #f8f9fa;
  font-size: 15px;
  color: #4796f0;
  height: 40px;
  line-height: 40px;
}

.my-tabs >>> #tab-second.is-active {
  background: #d4bc20;
  font-size: 20px;
  color: cornsilk;
  height: 40px;
  line-height: 40px;
}

</style>

结束啦！