hongze_yb_pc/src/layout/component/Aside.vue

<script setup>
import { reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

let activePath = ref("/activity/list");
watch(
  () => route.path,
  (to) => {
    activePath.value = to;
  },
  {
    immediate: true,
  }
);

const menuList = reactive([
  {
    MenuId: 1,
    name: "研报",
    path: "/report/list",
    icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
    children: null,
  },
  {
    MenuId: 1,
    name: "ETA图库",
    path: "/chart/list",
    icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
    children: null,
  },
  {
    MenuId: 1,
    name: "活动",
    path: "/activity/list",
    icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
    children: null,
  }
]);
</script>

<template>
  <div class="aside-wrap">
    <el-menu router :default-active="activePath" unique-opened text-color="#333" active-text-color="#F3A52F" class="el-menu-wrap">
      <template v-for="menu in menuList">
        <el-menu-item :index="menu.path" :key="menu.id" v-if="!menu.children">
          <img class="menu-icon" :src="menu.icon_path" alt="" />
          <span class="menu-text">{{ menu.name }}</span>
        </el-menu-item>
        <el-sub-menu :index="menu.MenuId + ''" :key="menu.MenuId" v-else>
          <template #title>
            <img class="menu-icon" :src="menu.icon_path" alt="" />
            <span class="menu-text">{{ menu.name }}</span>
          </template>
          <el-menu-item v-for="child in menu.children" :key="child.MenuId" :index="child.path" style="text-align: center">
            {{ child.name }}
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>


<style lang="scss" scoped>
.aside-wrap {
  padding-top: 20px;
  position: relative;
  border-right:1px solid #F2F2F2;
  height: 100%;
  &::-webkit-scrollbar {
    width: 0;
  }
}

.el-menu-wrap {
  width: 100%;
  border: none;
}
.el-menu-item:hover{
  background-color: #FFFBF5;
}
.el-menu-item.is-active {
  background-color: #FFFBF5 !important;
}
.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  vertical-align: middle;
}
.menu-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: bold;
}
ul,
li {
  box-sizing: border-box;
  display: block;
}
</style>