el-tabs自定义标签样式（小圆圈数字+文字）

最新推荐文章于 2024-06-29 14:48:29 发布

你不就像风一样

最新推荐文章于 2024-06-29 14:48:29 发布

阅读量302

点赞数 8

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/Apple23233/article/details/140018708

版权

1.代码实现-vue部分：

<el-tabs v-model="active" @tab-click="saveActive">
      <el-tab-pane label="省级电网输配电价" name="1">
        <template slot="label">
          <div class="tab-label">
            <span class="tab-dot green">1</span>省级电网输配电价
          </div>
        </template>
        <electric-province-price ref="electricProvincePrice"/>
      </el-tab-pane>
      <el-tab-pane label="区域电网输电价" name="2">
        <template slot="label">
          <div class="tab-label">
            <span class="tab-dot blue">2</span>区域电网输电价
          </div>
        </template>
        <electric-region-price ref="electricRegionPrice"/>
      </el-tab-pane>
      <el-tab-pane label="跨区跨省输电价" name="3">
        <template slot="label">
          <div class="tab-label">
            <span class="tab-dot pink">3</span>跨区跨省输电价
          </div>
        </template>
        <electric-cross-regional-price ref="electricCrossRegionalPrice"/>
      </el-tab-pane>
      <el-tab-pane label="燃煤基准价" name="4">
        <template slot="label">
          <div class="tab-label">
            <span class="tab-dot orange">4</span>燃煤基准价
          </div>
        </template>
        <electric-fire-coal-price ref="electricFireCoalPrice"/>
      </el-tab-pane>
      <el-tab-pane label="政府性基金及附加" name="5">
        <template slot="label">
          <div class="tab-label">
            <span class="tab-dot cyan">5</span>政府性基金及附加
          </div>
        </template>
        <electric-government-fund ref="electricGovernmentFund"/>
      </el-tab-pane>
      <el-tab-pane label="可再生上网价补助" name="6">
        <template slot="label">
          <div class="tab-label">
            <span class="tab-dot light-blue">6</span>可再生上网价补助
          </div>
        </template>
        <electric-renewable-price ref="electricRenewablePrice"/>
      </el-tab-pane>
    </el-tabs>

2.代码实现-css部分：

<style lang="scss" scoped>

.green{
  background-color: #00de6f;
}

.blue{
  background-color: #007fff;
}

.pink{
  background-color: #ff72b8;
}

.orange{
  background-color: #ff8000;
}

.cyan{
  background-color: #00e2e2;
}

.light-blue{
  background-color: #4da5ff;
}

.tab-label {
  display: flex;
  align-items: center;
  margin-top: -40px;
  margin-bottom: -40px;
}

.tab-dot {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  margin-right: 8px;
  font-size: 12px;
}

</style>

3.实现效果：