5.16
This commit is contained in:
hezhidong
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<template v-for="subItem in menuList" :key="subItem.path">
|
||||
<el-sub-menu
|
||||
v-if="subItem.children && subItem.children.length > 0"
|
||||
:index="subItem.path"
|
||||
>
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="subItem.meta.icon"></component>
|
||||
</el-icon>
|
||||
<span>{{ subItem.meta.title }}</span>
|
||||
</template>
|
||||
<Menu-items :menuList="subItem.children"></Menu-items>
|
||||
<!--<template v-for="child in subItem.children" :key="child.path">
|
||||
<template v-if="child.children && child.children.length > 0">
|
||||
<Menu-items :menuList="child.children"></Menu-items>
|
||||
</template>
|
||||
<el-menu-item v-else :index="child.path">
|
||||
<el-icon>
|
||||
<component :is="child.meta.icon"></component>
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ child.meta.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template> -->
|
||||
</el-sub-menu>
|
||||
<el-menu-item v-else :index="subItem.path">
|
||||
<el-icon>
|
||||
<component :is="subItem.meta.icon"></component>
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ subItem.meta.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps(["menuList"]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icons {
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<template v-for="subItem in menuList" :key="subItem.path">
|
||||
<el-menu-item v-if="!subItem.children" :index="subItem.url" :route="subItem.url">
|
||||
<el-icon>
|
||||
<component :is="subItem.icon"></component>
|
||||
</el-icon>
|
||||
<span>{{ subItem.title }}</span>
|
||||
</el-menu-item>
|
||||
<!--有多级菜单-->
|
||||
<el-sub-menu v-if="subItem.children" :key="subItem.url" :index="subItem.url">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="subItem.icon"></component>
|
||||
</el-icon>
|
||||
<span> {{ subItem.title }}</span>
|
||||
</template>
|
||||
<!--递归组件，把遍历的值传回子组件，完成递归调用-->
|
||||
<menu-items :menuList="subItem.children"></menu-items>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps(["menuList"]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icons {
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
.menu {
|
||||
transition: all 0.3s ease;
|
||||
background: #20222a;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.logo {
|
||||
transition: width 0.3s ease;
|
||||
height: 55px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2px solid #1d1e26;
|
||||
box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
|
||||
|
||||
span {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #dadada;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
object-fit: contain;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 55px);
|
||||
|
||||
.el-menu {
|
||||
// flex: 1;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
border: none !important;
|
||||
width: 100% !important;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background-color: #20222a;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #41444b;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
width: 200px;
|
||||
|
||||
&.is-active {
|
||||
background-color: #060708 !important;
|
||||
}
|
||||
|
||||
&.is-active::before {
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: $bg-color;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.href {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #bdbdc0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .el-menu--popup {
|
||||
// .el-menu-item {
|
||||
// background-color: #20222a;
|
||||
// width: 200px;
|
||||
|
||||
// i {
|
||||
// margin-right: 5px;
|
||||
// }
|
||||
|
||||
// i,
|
||||
// span {
|
||||
// color: hsla(0, 0%, 100%, 0.7);
|
||||
// }
|
||||
// //
|
||||
// &:hover {
|
||||
|
||||
// i,
|
||||
// span {
|
||||
// color: #fff !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.is-active {
|
||||
// background-color: #060708 !important;
|
||||
|
||||
// &:before {
|
||||
// content: "";
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// width: 4px;
|
||||
// background: $bg-color;
|
||||
// position: absolute;
|
||||
// }
|
||||
|
||||
// i,
|
||||
// span {
|
||||
// color: #fff !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div
|
||||
id="guide"
|
||||
class="menu"
|
||||
:style="{
|
||||
width: store.getters.isCollapse == true ? '' : '200px',
|
||||
height: '100%',
|
||||
color: themeConfig.textColor,
|
||||
}"
|
||||
>
|
||||
<div class="logo" v-if="!store.getters.isCollapse">
|
||||
<img src="../../assets/logo.png" alt="" style="margin-right: 5px" /> BIG CUTE
|
||||
</div>
|
||||
<div class="logo" v-else>
|
||||
<img src="../../assets/logo.png" alt="" />
|
||||
</div>
|
||||
<el-scrollbar style="height: 100%">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:router="true"
|
||||
:collapse="store.getters.isCollapse"
|
||||
:collapse-transition="false"
|
||||
:unique-opened="true"
|
||||
:background-color="themeConfig.backgroundColor"
|
||||
:text-color="themeConfig.textColor"
|
||||
:active-text-color="themeConfig.primary"
|
||||
>
|
||||
<menuItems :menuList="menuList"></menuItems>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import store from "../../store/index.js";
|
||||
import menuItems from "./components/menuItems.vue";
|
||||
// 引入本地路由表渲染导航栏
|
||||
import menuTable from "./menuTable.js";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
const route = useRoute();
|
||||
const activeMenu = computed(() => {
|
||||
return route.path;
|
||||
});
|
||||
const menuList = ref([]);
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const themeConfig = store.getters.themeConfig;
|
||||
|
||||
// 菜单表存在后端的操作方式
|
||||
onMounted(() => {
|
||||
// 获取本地菜单表渲染
|
||||
menuList.value = menuTable;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.menu {
|
||||
// width: 200px;
|
||||
.logo {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 20px;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
img {
|
||||
width: 25px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
// 菜单列表改了路由要记得改菜单相互匹配
|
||||
const menuTable = [
|
||||
{
|
||||
title: "首页",
|
||||
url: "/home",
|
||||
icon: "HomeFilled",
|
||||
},
|
||||
{
|
||||
title: "组别管理",
|
||||
url: "/groupManagement",
|
||||
icon: "Notebook",
|
||||
},
|
||||
];
|
||||
export default menuTable;
|
||||
Reference in New Issue
Block a user