CABaggageData2.0/src/layout/components/Sidebar/SidebarItem.vue

<template>
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children, item) && !item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
          <!-- <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> -->
          <!-- <item :icon="onlyOneChild.meta.title||(item.meta&&item.meta.title)"/> -->
          <!-- <el-tooltip
            class="item"
            effect="dark"
            :content="onlyOneChild.meta.title"
            placement="right"
          > -->
          <!-- <img class="nav_item" :src="onlyOneChild.meta.imger" /> -->
          <!-- <span class="pathName" :class="getClass(item.path)"></span>
          </el-tooltip> -->
          <el-tooltip class="item" effect="dark" :content="onlyOneChild.meta.title" placement="right" v-if="!leup"><span class="pathName" :class="getClass(item.path)"></span></el-tooltip>
          <span class="pathNamecosy" v-if="leup" :class="getClass(item.path)"></span>
          <span class="pathNameer" v-if="leup">{{
            onlyOneChild.meta.title
          }}</span>
        </el-menu-item>
      </app-link>
    </template>

    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
      <template slot="title">
        <img class="nav_item" :src="onlyOneChild.meta.imger" />
      </template>
    </el-submenu>
  </div>
</template>

<script>
import path from "path";
import { isExternal } from "@/utils/validate";
// import Item from './Item'
import AppLink from "./Link";
import FixiOSBug from "./FixiOSBug";

export default {
  name: "SidebarItem",
  components: {
    // Item,
    AppLink,
  },
  mixins: [FixiOSBug],
  props: {
    // route object
    item: {
      type: Object,
      required: true,
    },
    isNest: {
      type: Boolean,
      default: false,
    },
    basePath: {
      type: String,
      default: "",
    },
    leup: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
    // TODO: refactor with render function
    this.onlyOneChild = null;
    return {};
  },
  mounted () {
    // console.log(this.item, 'item')
    // const vnodes
    // vnodes.push(<span slot='title'>{(title)}</span>)
  },
  methods: {
    hasOneShowingChild (children = [], parent) {
      // console.log(this.item,'item')
      const showingChildren = children.filter((item) => {
        if (item.hidden) {
          return false;
        } else {
          // Temp set(will be used if only has one showing child)
          item.meta.imgstyle = item.meta.imgstyle
            ? item.meta.imgstyle
            : "ic_home_nav_default.png";
          item.meta.imgstyleup = item.meta.imgstyleup
            ? item.meta.imgstyleup
            : "ic_home_nav_check.png";
          this.onlyOneChild = item;
          const matched = this.$route.matched.some(
            (raw) => raw.path === item.path
          );
          if (matched) {
            this.onlyOneChild.meta.imger = require("@/assets/nav/" +
              item.meta.imgstyleup);
          } else {
            this.onlyOneChild.meta.imger = require("@/assets/nav/" +
              item.meta.imgstyle);
          }
          // console.log(this.$route,'router')
          return true;
        }
      });
      // When there is only one child router, the child router is displayed by default
      if (showingChildren.length === 1) {
        return true;
      }

      // Show parent if there are no child router to display
      if (showingChildren.length === 0) {
        this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
        return true;
      }

      return false;
    },
    resolvePath (routePath) {
      if (isExternal(routePath)) {
        return routePath;
      }
      if (isExternal(this.basePath)) {
        return this.basePath;
      }
      return path.resolve(this.basePath, routePath);
    },
    getClass (path) {
      const p = path.split("/").join("");
      if (p) {
        return p;
      } else {
        return "advance";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-menu-item.is-active {
  //设置背景颜色
  background-color: #2d67e3 !important;
  //设置字体颜色
  color: #ffffff !important;
}
.router-link-active > li {
  //设置背景颜色
  background-color: #2d67e3 !important;
  //设置字体颜色
  color: #ffffff !important;
}
// ::v-deep .el-menu-item.is-active:hover {
//   //设置背景颜色
//   background-color: #2d67e3 !important;
//   //设置字体颜色
//   color: #ffffff !important;
// }

// // ::v-deep .el-submenu__title:hover {
// //   background: red !important;
// // }
::v-deep .el-menu-item:hover {
  // background: #2d67e3 !important;
  color: #fff !important;
  .account {
    background: url("../../../assets/nav/ic_list_nav_account_check.png");
  }
  .role {
    background: url("../../../assets/nav/ic_list_nav_character_check.png");
  }
  .authority {
    background: url("../../../assets/nav/ic_list_nav_permissions_check.png");
  }
  .transfer {
    background: url("../../../assets/nav/ic_list_nav_transit_check.png");
  }
  .arrival {
    background: url("../../../assets/nav/ic_list_nav_arrive_check.png");
  }
  .departure {
    background: url("../../../assets/nav/ic_list_nav_leave_check.png");
  }
  .dataCollection {
    background: url("../../../assets/nav/ic_data_collection_check.png");
  }
  .dataParser {
    background: url("../../../assets/nav/ic_data_governance_check .png");
  }
  .dataStore {
    background: url("../../../assets/nav/ic_data_save_check.png") no-repeat;
  }
  .dashboard {
    background: url("../../../assets/nav/ic_setting_nav_check.png") no-repeat;
  }
  .advance {
    background: url("../../../assets/nav/ic_list_nav_search_check.png");
  }
  .integration {
    background: url("../../../assets/nav/ic_data_governance_check .png");
  }
  .protocol {
    background: url("../../../assets/nav/ic_list_nav_agreement_check.png");
  }

  .deployNode {
    background: url("../../../assets/nav/ic_list_nav_node_check.png");
  }

  .sourceDataItem {
    background: url("../../../assets/nav/ic_list_nav_source_check.png");
  }

  .BasicsData {
    background: url("../../../assets/nav/ic_data_collection_check.png")
      no-repeat;
  }

  .systemSettings {
    background: url("../../../assets/nav/ic_setting_nav_check.png") no-repeat;
  }

  .statisticsCharts {
    background: url("../../../assets/nav/ic_list_nav_statistical_check.png")
      no-repeat;
  }
  .statisticalAnalysis {
    background: url("../../../assets/nav/ic_list_nav_screen_check.png")
      no-repeat;
  }
}
// ::v-deep .el-menu-item {
//   transition: border-color 0.3s, background-color 0s, color 0s;
// }
// ::v-deep .el-submenu__title.is-active {
//   background-color: #6db6ff !important;
// }
// .pathNamecosy:hover {
//   background-image: #2d67e3 !important;
// }
.nav_item {
  width: 36px;
  height: 36px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.pathName {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  background-size: 100% 100%;
  transition: all 0.3s;
}
.pathNamecosy {
  width: 40px;
  height: 40px;
  position: absolute;
  left: -74%;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  // box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  background-size: 100% 100%;
  transition: all 0.3s;
}
.pathNameer {
  margin-left: 20%;
}
.pathNameercosy {
  display: none;
}
.account {
  background: url("../../../assets/nav/ic_list_nav_account_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_account_check.png")
      no-repeat;
  }
}
.role {
  background: url("../../../assets/nav/ic_list_nav_character_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_character_check.png")
      no-repeat;
  }
}
.authority {
  background: url("../../../assets/nav/ic_list_nav_permissions_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_permissions_check.png")
      no-repeat;
  }
}
.transfer {
  background: url("../../../assets/nav/ic_list_nav_transit_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_transit_check.png")
      no-repeat;
  }
}
.arrival {
  background: url("../../../assets/nav/ic_list_nav_arrive_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_arrive_check.png")
      no-repeat;
  }
}
.departure {
  background: url("../../../assets/nav/ic_list_nav_leave_default.png") no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_leave_check.png") no-repeat;
  }
}
.dataCollection {
  background: url("../../../assets/nav/ic_data_collection_default .png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_data_collection_check.png")
      no-repeat;
  }
}
.dataParser {
  background: url("../../../assets/nav/ic_data_governance_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_data_governance_check .png")
      no-repeat;
  }
}
.dataStore {
  background: url("../../../assets/nav/ic_data_save_default .png") no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_data_save_check.png") no-repeat;
  }
}
.dashboard {
  background: url("../../../assets/nav/ic_setting_nav_default.png") no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_setting_nav_check.png") no-repeat;
  }
}
.advance {
  background: url("../../../assets/nav/ic_list_nav_search_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_search_check.png")
      no-repeat;
  }
}
.integration {
  background: url("../../../assets/nav/ic_data_governance_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_data_governance_check .png")
      no-repeat;
  }
}
.protocol {
  background: url("../../../assets/nav/ic_list_nav_agreement_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_agreement_check.png")
      no-repeat;
  }
}

.deployNode {
  background: url("../../../assets/nav/ic_list_nav_node_default.png") no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_node_check.png") no-repeat;
  }
}

.sourceDataItem {
  background: url("../../../assets/nav/ic_list_nav_source_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_source_check.png")
      no-repeat;
  }
}

.BasicsData {
  background: url("../../../assets/nav/ic_data_collection_default .png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_data_collection_check.png")
      no-repeat;
  }
}

.systemSettings {
  background: url("../../../assets/nav/ic_setting_nav_default.png") no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_setting_nav_check.png") no-repeat;
  }
}

.statisticsCharts {
  background: url("../../../assets/nav/ic_list_nav_statistical_default .png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_statistical_check.png")
      no-repeat;
  }
}

.statisticalAnalysis {
  background: url("../../../assets/nav/ic_list_nav_screen_default.png")
    no-repeat;
  &:hover {
    background: url("../../../assets/nav/ic_list_nav_screen_check.png")
      no-repeat;
  }
}

// .el-tooltip__popper.is-dark{
//   background: #255395;
// }
// .el-tooltip__popper[x-placement^=right] .popper__arrow::after{
//   border-right-color: #255395
// }
</style>