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.
77 lines
2.5 KiB
77 lines
2.5 KiB
<template>
|
|
<el-scrollbar class="layout-aside">
|
|
<el-menu collapse :default-active="activeAside">
|
|
<el-menu-item v-for="(item, index) in asideList" :key="index" :index="item.name" @click="handleClick(item)">
|
|
<XIcon :name="item.meta.icon" size="30" />
|
|
<p>{{ item.meta.title }}</p>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</template>
|
|
|
|
<script setup>
|
|
const router = useRouter();
|
|
const store = useStore();
|
|
|
|
const asideList = computed(() => store.getters['layout/asideList']);
|
|
const activeAside = computed(() => store.state.layout.activeAside);
|
|
|
|
watch(
|
|
() => activeAside,
|
|
(value) => {
|
|
store.commit(
|
|
'layout/setMenuList',
|
|
unref(asideList).find((item) => item.name === unref(value))?.children || []
|
|
);
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
const handleClick = (item) => {
|
|
store.commit('layout/setActiveAside', item.name);
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.layout-aside {
|
|
flex: 1;
|
|
width: @layout-aside-width;
|
|
height: 100%;
|
|
background-color: @color-black;
|
|
:deep(.el-scrollbar__view) {
|
|
height: 100%;
|
|
.el-menu {
|
|
--el-menu-bg-color: transparent;
|
|
--el-menu-text-color: @layout-aside-fc;
|
|
--el-menu-item-height: @layout-aside-item-size;
|
|
--el-menu-hover-bg-color: @layout-aside-fc2;
|
|
border-right: none;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.el-menu-item {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 !important;
|
|
border-radius: @layout-border-radius;
|
|
width: @layout-aside-item-size;
|
|
.x-icon {
|
|
margin-bottom: @layout-space;
|
|
}
|
|
P {
|
|
line-height: 1;
|
|
}
|
|
&.is-active {
|
|
background-color: var(--el-menu-active-color);
|
|
color: @layout-aside-fc;
|
|
}
|
|
+ .el-menu-item {
|
|
margin-top: @layout-space;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|