pingAnQiYeWeb/src/loveflow/components/menu/aside.vue

<template>
  <!-- 系统管理左侧导航菜单 -->
  <el-menu
    ref="menu"
    :default-active="activeMenu"
    class="el-menu-vertical-demo"
    :router="true"
  >
    <!-- background-color="#f5f2e9"
    text-color="#5aa4ae" -->
    <!-- 一级导航 -->
    <el-menu-item
      :route="item.path"
      v-for="item in menuList"
      :key="item.name"
      :index="item.name"
    >
      <i>
        <img :src="item.icon" alt="" />
      </i>
      <span slot="title">{{ item.title }}</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  name: "LeftNav",
  data() {
    return {
      isCollapse: false,
      activeMenu: "",
      menuList: [],
    };
  },

  created() {
    this.activeMenu = this.$route.meta.name;
    console.log(this.$route);
    console.log(this.$router);
    this.dealMenu(this.$router.getRoutes());
  },
  methods: {
    dealMenu(menu) {
      this.menuList = [];
      menu = menu || [];
      let curName = this.$route.name;
      for (let i = 0; i < menu.length; i++) {
        if (menu[i]["path"].indexOf(curName) > -1) {
          if (menu[i]["meta"] && menu[i]["meta"]["aside"]) {
            this.menuList.push({
              title: menu[i]["meta"]["title"],
              name: menu[i]["meta"]["name"],
              path: menu[i]["path"],
              icon: menu[i]["meta"]["icon"],
            });
          }
        }
      }
      //console.log(this.menuList);
    },
    // 点击跳转路由
    clickMenu(val) {
      this.$router.push({
        path: val.path,
      });
    },
    setCurrentRoute() {
      this.active = this.$route.path; //监听到当前路由状态并激活当前菜单
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    select() {
      sessionStorage.setItem("navkeep", this.$refs.menu.activeIndex);
    },
  },
  watch: {
    $route(to, from) {
      console.log("aside", to);
      this.activeMenu = to.meta.name;
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%; /* 保持和大的aside同宽 */
  min-height: 98%; /* 固定侧边导航栏高度 */
  background: url("~@/assets/companyFile/menuback.png") no-repeat;
  padding: 20px;
  box-sizing: border-box;
  background-size: 100% 100%;
}
.el-menu-vertical-demo.el-menu {
  .el-menu-item {
    width: 100%;
    margin-top: 20px;
    // margin-left: 17px;y
    color: #fff;
    font-size: 18px;
    background: url("~@/assets/companyFile/921.png") no-repeat;
    background-size: 100% 100%;
    i {
      margin-right: 10px;
      width: 20px;
      height: 20px;
      img {
        margin-bottom: 4px;
        width: 20px;
        height: 20px;
      }
    }
    &.is-active {
      filter: brightness(150%);
      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
    }
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    /* 导航选项点击触碰效果 */
    filter: brightness(150%);
    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
  }
}
</style>