element tab选项卡标签样式

前言

今天工作时有一个需求，大致是把elementUI的选项卡标签样式修改修改。起初是想直接重写element样式类，但是需求中还需对标签中的数字特殊处理，这种方式就行不通了。百度找了很久，终于在一个偏僻的角落找到了答案。

正文

使用插槽

其实这个解决方式，也是我第一时间想到的，但是查阅官网后，发现并没有对label的插槽。但是看着那位老哥的写法，试了试果然成功了。现在整理整理，发出来与大家共勉。

原始的代码以及效果图

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in tabs"
      :label="item.count ? item.title + item.count : item.title"
      :name="item.value"
      :key="item.id"
    >
      {{ item.id }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      tabs: [
        {
          title: "消息",
          value: "first",
          count: 3,
          id: 1
        },
        {
          title: "待办",
          value: "second",
          count: 4,
          id: 2
        },
        {
          title: "角色管理",
          value: "third",
          id: 3
        }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style scoped></style>

如果我对整体进行处理，比如把消息3字体设置大一些，颜色改一改，那么你直接重写el-tab-pane这个样式类即可；但现在我想给标签中的数字来点间距和背景色啥的，这种方式就不行了。下面是解决方法。

使用插槽后的代码和效果图

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in tabs"
      :label="item.count ? item.title + item.count : item.title"
      :name="item.value"
      :key="item.id"
    >
      <div slot="label">
        <span class="key">{{ item.title }}</span>
        <span class="value" v-if="item.count">{{ item.count }}</span>
      </div>
      {{ item.id }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      tabs: [
        {
          title: "消息",
          value: "first",
          count: 3,
          id: 1
        },
        {
          title: "待办",
          value: "second",
          count: 4,
          id: 2
        },
        {
          title: "角色管理",
          value: "third",
          id: 3
        }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style scoped>
.value {
  color: #ff0000;
  font-size: 16px;
}
</style>

如果你要是接过来一张设计稿，里面提及选项卡标签选中和未选中的字体颜色，大小，背景颜色等等，那么当你设置了这些样式之后，就会发现elementUI的默认tab切换效果失效了。这时，我们就要写一个active类来控制切换样式。在这里我简单示范下。

最终代码以及预览图

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in tabs"
      :label="item.count ? item.title + item.count : item.title"
      :name="item.value"
      :key="item.id"
    >
      <div
        slot="label"
        class="my-label"
        :class="activeName === item.value ? 'tab-active' : ''"
      >
        <span class="key">{{ item.title }}</span>
        <span class="value" v-if="item.count">{{ item.count }}</span>
      </div>
      {{ item.id }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      tabs: [
        {
          title: "消息",
          value: "first",
          count: 3,
          id: 1
        },
        {
          title: "待办",
          value: "second",
          count: 4,
          id: 2
        },
        {
          title: "角色管理",
          value: "third",
          id: 3
        }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style scoped>
.my-label {
  color: #424242;
}

.my-label .key {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 20px;
}

.my-label .value {
  vertical-align: middle;
  display: inline-block;
  width: 21px;
  height: 16px;
  font-size: 12px;
  font-family: CZ-Regular, CZ;
  font-weight: 400;
  line-height: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  margin: -4px 0 0 4px;
}

.tab-active {
  color: #01b27a;
}

.tab-active .value {
  background-color: #e5f7f1;
}
</style>

如果对你有帮助的话，请点一个赞吧