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.
104 lines
2.2 KiB
104 lines
2.2 KiB
<template>
|
|
<div class="menu flex justify-center">
|
|
|
|
<van-sidebar v-model="active" :active="activeName" class="sidebar">
|
|
<van-sidebar-item v-for="(menu,index) in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu, index)">
|
|
<template #title scoped>
|
|
<div class="menn_li">
|
|
<div><img :src="active == index ? menu.s_icon : menu.n_icon" class="menu_icon" /></div>
|
|
<div>{{ menu.name }}</div>
|
|
</div>
|
|
</template>
|
|
</van-sidebar-item>
|
|
</van-sidebar>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { getMenus } from "./menu.ts";
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const imageModules: any = import.meta.glob("@/assets/menuIcon/*.svg");
|
|
const importedImages: any = {};
|
|
const onHeadleIcon = async () => {
|
|
for (const path in imageModules) {
|
|
let pst = await imageModules[path]();
|
|
importedImages[path] = pst.default;
|
|
}
|
|
};
|
|
|
|
const active = ref(0);
|
|
const activeName = ref('')
|
|
interface Menu {
|
|
id: number;
|
|
name: string;
|
|
s_icon: string;
|
|
n_icon: string;
|
|
path: string;
|
|
}
|
|
const goPage = (menu: Menu, index:any) => {
|
|
active.value = index;
|
|
activeName.value = menu.name
|
|
router.push(`${menu.path}`);
|
|
};
|
|
|
|
const muneList: any = ref([]);
|
|
onMounted(async () => {
|
|
await onHeadleIcon();
|
|
let path = route.path;
|
|
muneList.value = getMenus();
|
|
//@ts-ignore
|
|
muneList.value.forEach(item => {
|
|
if (item.path === path) {
|
|
active.value = item.id;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.menu {
|
|
width: var(--menuAreaWidth);
|
|
.sidebar {
|
|
width: calc(var(--menuAreaWidth) - 2.5rem);
|
|
font-size: 1rem;
|
|
}
|
|
@media (max-width: 790px) {
|
|
.sidebar {
|
|
width: 100%;
|
|
}
|
|
.menn_btn {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menn_text {
|
|
font-size: 1rem;
|
|
margin-top: 0.625rem;
|
|
}
|
|
|
|
.van-sidebar {
|
|
--van-sidebar-active-color: #0088cc; /* 设置激活项颜色为蓝色 */
|
|
/* --van-sidebar-background: red; */
|
|
--van-sidebar-selected-background: #1989fa;
|
|
}
|
|
|
|
.menn_btn {
|
|
border-radius: 10px;
|
|
height: 3.125rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.menn_li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.menu_icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
</style>
|