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.
102 lines
2.7 KiB
102 lines
2.7 KiB
<template>
|
|
<div class="menu flex justify-center">
|
|
<van-sidebar v-model="active" class="sidebar">
|
|
<van-sidebar-item v-for="menu in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu)">
|
|
<template #title scoped>
|
|
<div class="menn_li">
|
|
<div><img :src="active== menu.id ? menu.s_img : menu.n_img" 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 { menuIcon } 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);
|
|
interface Menu {
|
|
id: number
|
|
name: string
|
|
s_icon: string
|
|
n_icon: string
|
|
s_img: string
|
|
n_img: string
|
|
path: string
|
|
}
|
|
const goPage = (menu:Menu) => {
|
|
active.value = menu.id
|
|
router.push(`${menu.path}`)
|
|
}
|
|
|
|
const muneList:any = ref([])
|
|
onMounted(async ()=>{
|
|
await onHeadleIcon()
|
|
let path = route.path
|
|
muneList.value = menuIcon
|
|
//@ts-ignore
|
|
muneList.value.forEach(item => {
|
|
item.s_img = importedImages[item.s_icon]
|
|
item.n_img = importedImages[item.n_icon]
|
|
if(item.path === path){
|
|
active.value = item.id
|
|
}
|
|
});
|
|
console.log('muneList.value---', muneList.value)
|
|
})
|
|
|
|
</script>
|
|
<style lang="css" scoped>
|
|
.sidebar{
|
|
width: calc(var(--menuAreaWidth) - 2.5rem);
|
|
/* padding: 0 1.125rem; */
|
|
font-size: 1rem
|
|
}
|
|
.menu{
|
|
width: var(--menuAreaWidth);
|
|
}
|
|
|
|
.menn_text{
|
|
font-size: 1rem;
|
|
margin-top:.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>
|