vue 动态设置每个tab的颜色scss

zxna

于 2024-08-20 15:49:45 发布

阅读量103

点赞数 1

文章标签： vue.js scss javascript

本文链接：https://blog.csdn.net/qq_32555123/article/details/141360613

版权

在这里插入图片描述

  <div
  class="tab-line"
    :style="{ '--active-tab-bg': activeTabBg }"
  >
  ></div>

export default {
  computed: {
    activeTabBg() {
      return `var(--active-tab-bg-${this.data.key}, #3870ea)`;
    },
  },
}

<style lang="scss" scoped>
.tab-line {
  ::v-deep {
    .el-tabs__nav-scroll {
      border-bottom: 2px solid var(--active-tab-bg, #3870ea);
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item {
      border-bottom: 0px;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__nav {
      border: 0px solid #ebecf0;
    }

    .el-tabs__item {
      background: var(--neutral-5);
      font-size: 15px;
      font-weight: 400;
      color: #172b4d;
      border-radius: 5px 5px 0px 0px;
      margin-right: 10px;
      height: 32px;
      line-height: 34px;
      padding: 0 12px !important;
    }
    .el-tabs__item.is-active {
      color: #ffffff;
      background: var(--active-tab-bg, #3870ea);
      font-weight: 600;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
      border-bottom-color: transparent;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item {
      border-left: 0px solid #ebecf0;
    }
  }
}
.tab-card {
  ::v-deep {
    .el-tabs--card > .el-tabs__header .el-tabs__nav {
      border: 0px solid #ebecf0;
    }
    .el-tabs__item {
      background: transparent;
      font-size: 15px;
      font-weight: 500;
      color: #172b4d;
      border-radius: 5px 5px 0px 0px;
      margin-right: 10px;
      height: 32px;
      line-height: 34px;
      padding: 0 12px !important;
      color: #ffffff;
    }
    .el-tabs__item.is-active {
      color: #172b4d;
      background: #ffffff;
      margin: 6px 16px 0 10px;
      font-weight: 600;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
      border-bottom-color: transparent;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item {
      border-left: 0px solid #ebecf0;
    }
    .el-tabs__nav-scroll {
      background: var(--active-tab-bg, #3870ea);
    }
  }
}
</style>