112 lines
4.1 KiB
Vue
112 lines
4.1 KiB
Vue
<template>
|
|
<div class="ele-admin-sidebar-menus">
|
|
<el-scrollbar>
|
|
<el-menu unique-opened :default-active="activeMenuIndex" :default-openeds="openedMenus" @select="menuSelect" class="ele-menu-dark">
|
|
<menu-list :menus="leftMenus" :depth="0" :key="$store.state.activeMenuModuleId"></menu-list>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "SideBarLeftMenu",
|
|
store,
|
|
components: {
|
|
"menu-list": {
|
|
name: "menu-list",
|
|
template:
|
|
/*language=HTML*/
|
|
`
|
|
<div>
|
|
<template v-for="(item, index) in menus">
|
|
<el-submenu :index="item.id" v-if="item.children && item.children.length > 0">
|
|
<template #title>
|
|
<svg-icon :name="item.icon" v-if="item.icon" :size="18"></svg-icon>
|
|
<i v-else class="el-icon-paperclip"></i>
|
|
<span>{{ item.name }}</span>
|
|
</template>
|
|
<menu-list :menus="item.children" :depth="depth + 1" />
|
|
</el-submenu>
|
|
<el-menu-item :index="item.id" v-else>
|
|
<a :href="item.href" data-pjax>
|
|
<svg-icon :name="item.icon" v-if="item.icon" :size="18"></svg-icon>
|
|
<i v-else :class="item.icon ? item.icon : 'el-icon-menu'"></i>
|
|
<span>{{ item.name }}</span>
|
|
</a>
|
|
</el-menu-item>
|
|
</template>
|
|
</div>
|
|
`,
|
|
props: ["menus", "depth"]
|
|
}
|
|
},
|
|
computed: {
|
|
//模块
|
|
pcModuleMenus() {
|
|
return this.$store.getters.pcModules
|
|
},
|
|
//左侧菜单 根据模块id动态变化
|
|
leftMenus() {
|
|
const activeMenuModuleId = this.$store.state.activeMenuModuleId
|
|
if (activeMenuModuleId) {
|
|
if (this.pcModuleMenus) {
|
|
return this.pcModuleMenus.find((module) => module.id === activeMenuModuleId)?.menus
|
|
}
|
|
return []
|
|
}
|
|
return []
|
|
},
|
|
//当前选中菜单
|
|
activeMenuIndex() {
|
|
return this.$store.state.activeMenuIndex
|
|
},
|
|
//当前打开的菜单 数组 包含所有父菜单
|
|
openedMenus() {
|
|
return this.$store.state.openedMenus
|
|
}
|
|
},
|
|
methods: {
|
|
//点击菜单
|
|
menuSelect(index, indexPath) {
|
|
this.$store.commit("setActiveMenuIndex", index)
|
|
this.$store.commit("setOpenedMenus", indexPath)
|
|
this.$store.commit("addHistoryMenuId", index)
|
|
},
|
|
onResize() {
|
|
if (window.innerWidth < 768) {
|
|
$("#ele-admin-header.ele-admin-header .ele-admin-header-tool .ele-admin-header-tool-item.collapse-menu")[0].style.display = "flex"
|
|
document.querySelector("body >div > div.ele-admin-layout").classList.add("ele-admin-collapse")
|
|
} else {
|
|
$("#ele-admin-header.ele-admin-header .ele-admin-header-tool .ele-admin-header-tool-item.collapse-menu")[0].style.display = "none"
|
|
document.querySelector("body >div > div.ele-admin-layout").classList.remove("ele-admin-collapse")
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.$store.dispatch("pjaxRoute", window.location)
|
|
},
|
|
mounted() {
|
|
// 监听窗口大小 并且使用节流
|
|
this.onResize()
|
|
this.handleResize = MinDash.throttle(this.onResize, 500)
|
|
$(window).resize(() => {
|
|
this.handleResize()
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
$(window).off("resize", this.handleResize)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.menu-link {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|