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">
      <el-tooltip placement="right" :content="tab.description" v-show="!tab.hide">
        <i class="icon" :target="tab.name"></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: 'statistics', description: '详细数据', hide: true },
  { name: 'invite', description: '项目关联', hide: false },
];

export default {
  name: 'SideBar',
  data() {
    return {
      sidebar,
    };
  },
  computed: {
    active() {
      const li = this.$route.path.split('/');
      return li[li.length - 1];
    },
  },
};
</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/navigation.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/navigation-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/navigation-using.svg");
  }
}
.icon[target=taskList]{
  background-image: url("../assets/icon/task.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/task-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/task-using.svg");
  }
}
.icon[target=bugList]{
  background-image: url("../assets/icon/bug.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/bug-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/bug-using.svg");
  }
}
.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/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=database]{
  background-image: url("../assets/icon/database.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/database-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/database-using.svg");
  }
}
.icon[target=apitest]{
   background-image: url("../assets/icon/test.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/test-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/test-using.svg");
  }
}
.icon[target=invite]{
   background-image: url("../assets/icon/link.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/link-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/link-using.svg");
  }
}
</style>