seecoder-devcloud-frontend/src/components/SideBar.vue

<template>
  <el-menu :default-active="active" class="side-bar" :collapse="true" :router="true">
    <el-menu-item v-for="tab in sidebar" :index="tab.name" :key="tab.name" v-show="!tab.hide" style="height: 70px;">
      <el-tooltip placement="right" :content="tab.description">
        <i class="icon" :target="tab.name">
          <div v-if="calculateLength(tab.description) === 1" class="title" style="margin-left: 2px;">
            {{tab.description}}
          </div>
          <div v-else-if="calculateLength(tab.description) === 2" class="title" style="margin-left: -3px;">
            {{tab.description}}
          </div>
          <div v-else-if="calculateLength(tab.description) === 3" class="title" style="margin-left: -8px;">
            {{tab.description}}
          </div>
          <div v-else class="title" style="margin-left: -3px;">
            {{tab.description.slice(0, 3)}}
          </div>
        </i>
      </el-tooltip>
    </el-menu-item>
  </el-menu>
</template>

<script>
const sidebar = [
  { name: 'schedule', description: '项目规划', hide: false },
  { name: 'taskList', description: '任务列表', hide: false },
  { name: 'bugList', description: '缺陷列表', hide: false },
  { name: 'pipeline', description: '流水线及产物', hide: false },
  { name: 'database', description: '数据库', hide: false },
  { name: 'apitest', description: '测试', hide: false },
  { name: 'invite', description: '项目关联', hide: false },
  { name: 'git', description: '提交记录', hide: false },
  { name: 'codereview', description: '代码评审', hide: false },
];

export default {
  name: 'SideBar',
  data() {
    return {
      sidebar,
    };
  },
  computed: {
    active() {
      const li = this.$route.path.split('/');
      return li[li.length - 1];
    },
  },
  methods: {
    calculateLength(name) {
      if (name.length === 2) {
        return 1;
      }
      if (name.length === 3) {
        return 2;
      }
      if (name.length === 4) {
        return 3;
      }
      return 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.side-bar {
  height: 100%;
}
.icon {
  width: 28px;
  height: 28px;
  float: right;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 14px;
  transition: all .2s linear;
  .el-menu-item:hover & {
    cursor: pointer;
    transition-duration:0.2s;
    transform:scale(1.1);
    transition-timing-function:ease-in-out;
  }
}
.icon[target=schedule]{
  background-image: url("../assets/icon_new/schedule.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon_new/schedule-hover.svg");
    color: #2c2c2c;
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon_new/schedule-using.svg");
    color: #1296db;
  }
}
.icon[target=taskList]{
  background-image: url("../assets/icon_new/task.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon_new/task-hover.svg");
    color: #2c2c2c;
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon_new/task-using.svg");
    color: #1296db;
  }
}
.icon[target=bugList]{
  background-image: url("../assets/icon_new/bug.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon_new/bug-hover.svg");
    color: #2c2c2c;
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon_new/bug-using.svg");
    color: #1296db;
  }
}
.icon[target=statistics]{
  background-image: url("../assets/icon/training.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/training-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/training-using.svg");
  }
}
.icon[target=pipeline]{
  background-image: url("../assets/icon_new/pipeline.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon_new/pipeline-hover.svg");
    color: #2c2c2c;
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon_new/pipeline-using.svg");
    color: #1296db;
  }
}
.icon[target=database]{
  background-image: url("../assets/icon_new/database.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon_new/database-hover.svg");
    color: #2c2c2c;
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon_new/database-using.svg");
    color: #1296db;
  }
}
.icon[target=apitest]{
   background-image: url("../assets/icon_new/test.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon_new/test-hover.svg");
    color: #2c2c2c;
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon_new/test-using.svg");
    color: #1296db;
  }
}
.icon[target=invite]{
   background-image: url("../assets/icon_new/link.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon_new/link-hover.svg");
    color: #2c2c2c;
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon_new/link-using.svg");
    color: #1296db;
  }
}
.icon[target=git]{
  background-image: url("../assets/icon_new/git.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon_new/git-hover.svg");
    color: #2c2c2c;
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon_new/git-using.svg");
    color: #1296db;
  }
}
.icon[target=codereview]{
  background-image: url("../assets/icon_new/codereview.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon_new/codereview-hover.svg");
    color: #2c2c2c;
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon_new/codereview-using.svg");
    color: #1296db;
  }
}
.title{
  font-size: 9px;
  margin-top: 12px;
  font-style: normal;
}

</style>