<script setup>
|
import {computed, ref} from "vue";
|
import usePageMenuStore from "@/store/usePageMenuStore";
|
const pageMenuStore = usePageMenuStore();
|
|
const isCollapse = computed(()=>{
|
return pageMenuStore.isCollapse;
|
});
|
|
const menuActive = ref("/");
|
const menuData = ref([]);
|
menuData.value = [
|
{
|
title: "首页",
|
path: "/",
|
icon: "HomeFilled"
|
},
|
{
|
title: "门禁",
|
path: "/accessControl",
|
icon: "Checked",
|
},
|
{
|
title: "视频监控",
|
path: "/video",
|
icon: "VideoCameraFilled",
|
},
|
{
|
title: "空调",
|
path: "/airConditioning",
|
icon: "Postcard",
|
},
|
{
|
title: "用户管理",
|
path: "/userManagement",
|
icon: "UserFilled"
|
},
|
];
|
|
const handleOpen = ()=>{};
|
const handleClose = ()=>{};
|
</script>
|
|
<template>
|
<div class="menu-wrapper">
|
<el-menu
|
:router="true"
|
text-color="#4ba1fa"
|
active-text-color="#00fefe"
|
background-color="#021a64"
|
:default-active="menuActive"
|
:unique-opened="true"
|
class="el-menu-vertical"
|
:collapse="isCollapse"
|
@open="handleOpen"
|
@close="handleClose">
|
<template v-for="menu in menuData" :key="menu.path">
|
<el-sub-menu :index="menu.path" v-if="menu.children">
|
<template #title>
|
<el-icon>
|
<component :is="menu.icon"></component>
|
</el-icon>
|
<span>{{menu.title}}</span>
|
</template>
|
<el-menu-item
|
v-for="children in menu.children"
|
:key="children.path"
|
:index="children.path">{{children.title}}</el-menu-item>
|
</el-sub-menu>
|
<el-menu-item :index="menu.path" v-else>
|
<el-icon>
|
<component :is="menu.icon"></component>
|
</el-icon>
|
<template #title>{{menu.title}}</template>
|
</el-menu-item>
|
</template>
|
</el-menu>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.menu-wrapper {
|
height: 100%;
|
overflow-y: auto;
|
background-color: #021a64;
|
&.min-width {
|
min-width: 240px;
|
}
|
}
|
.el-menu-vertical {
|
border-right: 0;
|
.el-menu-item.is-active{
|
background-color: rgb(4, 32, 119);
|
}
|
}
|
|
.el-menu-vertical:not(.el-menu--collapse) {
|
width: 200px;
|
min-height: 400px;
|
}
|
</style>
|
