You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
3.8 KiB
143 lines
3.8 KiB
<template>
|
|
|
|
<!-- 菜单logo区域 -->
|
|
<MenuLogo></MenuLogo>
|
|
|
|
<!-- 菜单区域 -->
|
|
<!-- 通过当前路由获取路径返回给defalut-active,将默认事件绑定在当前路由路径上 -->
|
|
<el-menu
|
|
router background-color="#00c6bf"
|
|
:collapse="collapse"
|
|
:default-active="activeIndex"
|
|
class="el-menu-vertical-demo">
|
|
|
|
<!-- 注释掉暂时不需要的多余属性 -->
|
|
<!-- <el-sub-menu index="1">
|
|
<template #title>
|
|
<el-icon><location /></el-icon>
|
|
<span>Navigator One</span>
|
|
</template>
|
|
<el-menu-item-group>
|
|
<template #title><span>Group One</span></template>
|
|
<el-menu-item index="1-1">item one</el-menu-item>
|
|
<el-menu-item index="1-2">item two</el-menu-item>
|
|
</el-menu-item-group>
|
|
<el-menu-item-group title="Group Two">
|
|
<el-menu-item index="1-3">item three</el-menu-item>
|
|
</el-menu-item-group>
|
|
<el-sub-menu index="1-4">
|
|
<template #title><span>item four</span></template>
|
|
<el-menu-item index="1-4-1">item one</el-menu-item>
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
<el-menu-item index="2">
|
|
<el-icon><icon-menu /></el-icon>
|
|
<template #title>Navigator Two</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="3" disabled>
|
|
<el-icon><document /></el-icon>
|
|
<template #title>Navigator Three</template>
|
|
</el-menu-item> -->
|
|
|
|
|
|
<!-- 新增首页菜单栏选项 -->
|
|
<el-menu-item index="/dashboard">
|
|
<el-icon><Menu /></el-icon>
|
|
<template #title>首页</template>
|
|
</el-menu-item>
|
|
<!-- 添加菜单栏选项 -->
|
|
<el-menu-item index="/user">
|
|
<el-icon><Menu /></el-icon>
|
|
<template #title>用户管理</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/category">
|
|
<el-icon><Menu /></el-icon>
|
|
<template #title>菜品分类</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/goods">
|
|
<el-icon><Memo /></el-icon>
|
|
<template #title>菜品管理</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/order">
|
|
<el-icon><Monitor /></el-icon>
|
|
<template #title>订单管理</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="banner">
|
|
<el-icon><Calendar /></el-icon>
|
|
<template #title>广告管理</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="comment">
|
|
<el-icon><Edit /></el-icon>
|
|
<template #title>评论管理</template>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 引入菜单图标
|
|
// import { Menu } from '@element-plus/icons-vue'
|
|
|
|
// 局部引入菜单栏中所有选项的图标
|
|
import { Menu, Memo, Monitor, Calendar,Edit } from '@element-plus/icons-vue'
|
|
|
|
// 引入MenuLogo
|
|
import MenuLogo from './MenuLogo.vue'
|
|
|
|
// 添加 computed 导入
|
|
import { ref, computed } from 'vue'
|
|
|
|
|
|
// 引入路由
|
|
import {useRoute} from 'vue-router'
|
|
|
|
// 获取当前路由
|
|
const route = useRoute()
|
|
|
|
// 通过当前路由路径，获取激活选项
|
|
const activeIndex = computed(()=>{
|
|
const { path } = route
|
|
return path
|
|
})
|
|
|
|
// 获取store中useCollapseStore传递给collapse属性控制菜单伸缩
|
|
import { useCollapseStore } from '@/store/collapse'
|
|
|
|
// 获取store
|
|
const store = useCollapseStore()
|
|
|
|
// 获取菜单状态
|
|
const collapse = computed(()=>{
|
|
return store.getCollapse
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
width: 230px;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.el-menu {
|
|
border-right: none;
|
|
}
|
|
|
|
.el-menu .el-menu-item {
|
|
color: #f0f0f0;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.el-menu-item.is-active {
|
|
color: #ffffff !important;
|
|
background-color: #009e99 !important;
|
|
font-size: 17px !important;
|
|
}
|
|
|
|
// 鼠标移动时菜单颜色
|
|
:deep(.el-menu-item:hover) {
|
|
color: #fff;
|
|
background-color: #007874 !important;
|
|
font-size: 17px !important;
|
|
}
|
|
</style> |