elizebeth/src/views/layout/components/Sidebar/index.vue

<template>
  <el-scrollbar wrapClass="scrollbar-wrapper">
    <!-- <div class="sideColumn">
      <hamburger
        class="hamburger-container"
        :toggleClick="toggleSideBar"
        :isActive="sidebar.opened"
      ></hamburger>
    </div>-->
    <!-- <el-menu
      mode="vertical"
      :unique-opened="uniqueOpened"
      :show-timeout="200"
      :default-active="$route.path"
      :collapse="isCollapse"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >-->
    <div class="logo">
      <img src="/static/img/logo.8dbb9fd.png" alt />
    </div>
    <el-menu
      mode="vertical"
      :unique-opened="uniqueOpened"
      :show-timeout="200"
      :default-active="$route.path"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <sidebar-item
        v-for="(route, index) in permission_routers"
        :key="route.name"
        :item="route"
        :base-path="route.path"
        :index="index"
        @a="b"
      ></sidebar-item>
    </el-menu>
  </el-scrollbar>
  <!-- <div class="mianLeft">
    <div class="logo">
      <img src="/static/img/logo.8dbb9fd.png" alt="" />
    </div>
    <div class="navBox">
      <div
        class="navOne"
        :class="activeClass == index ? 'active' : ''"
        v-for="(item, index) in permission_routers"
        :key="item.name"
        v-if="!item.hidden && item.children"
      >
        <div v-if="item.meta" @click="onClick(index)" class="one">
          <router-link :to="item.children[0].path">
          <svg-icon
            v-if="item.meta && item.meta.icon"
            :icon-class="item.meta.icon"
          ></svg-icon>
          <p v-if="item.meta && item.meta.title">
            {{ generateTitle(item.meta.title) }}
          </p>
          </router-link>
        </div>

        <div v-else @click="onClick(index)">
          <router-link :to="item.children[0].path" class="one">
            <svg-icon :icon-class="item.children[0].meta.icon"></svg-icon>
            <p>
              {{ generateTitle(item.children[0].meta.title) }}
            </p>
          </router-link>
        </div>
      </div>
    </div>
  </div>-->
</template>

<script>
import { mapGetters } from "vuex";
import SidebarItem from "./SidebarItem";
import Hamburger from "@/components/Hamburger";
import { generateTitle } from "@/utils/i18n";

export default {
  components: { SidebarItem, Hamburger },
  computed: {
    ...mapGetters(["permission_routers", "sidebar"]),
    isCollapse() {
      return !this.sidebar.opened;
    }
  },
  data() {
    return {
      uniqueOpened: true,
      activeClass: 0,
      index: 0
    };
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("toggleSideBar");
    },
    generateTitle,
    resolvePath(...paths) {
      return path.resolve(this.basePath, ...paths);
    },
    b(index) {
      // console.log(index);
      // this.index = index;
      // this.activeClass = index;
      this.$emit("callBackIndex", index);
    }
  },
  created() {
    console.log(1111111121121111111, this.permission_routers);
    // this.permission_routers.map(item => {
    //   console.log(item.children);
    // });
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.mianLeft {
  width: 150px;
  height: 100%;
  overflow-y: auto;
  background: #304155;

  .navBox {
    display: flex;
    flex-wrap: wrap;
    .navOne {
      width: 50%;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #fff;
      .one {
        display: flex;
        align-items: center;
        flex-direction: column;
        p {
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }
    .active {
      background: #409eff;
    }
  }
}

.logo {
  width: 100px;
  height: 32px;
  margin: 20px auto 0;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.sideColumn {
  background-color: rgb(48, 65, 86);
  .head {
    text-align: center;
    padding: 20px 0 0 0;
    .tx {
      .img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
      }
    }
    .title {
      font-size: 14px;
      color: #bfcbd9;
      padding: 10px 10px 15px 10px;
      line-height: 22px;
    }
  }
  .headShrink {
    .tx {
      .img {
        width: 30px;
        height: 30px;
      }
    }
    .title {
      display: none;
    }
  }
}
</style>

<style lang="scss">
.scrollbar-wrapper {
  background-color: rgb(48, 65, 86);
}
</style>