96 lines
2.8 KiB
Vue
96 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import {navigateTo} from "#imports";
|
|
|
|
const navigations = useMenu();
|
|
import {useMenu} from "~/composables/configState";
|
|
const handleSelect = (index: any,keyPath: string[]) => {
|
|
const split = index.split('-');
|
|
if(split.length == 1){
|
|
const item = navigations.value[index];
|
|
navigateTo(item)
|
|
}
|
|
if(split.length == 2){
|
|
const item = navigations.value[split[0]];
|
|
if(item.children){
|
|
const child = item.children[split[1]];
|
|
navigateTo(child.path)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-menu
|
|
mode="horizontal"
|
|
style="background-color: transparent;"
|
|
active-text-color="#1b850c"
|
|
:ellipsis="false"
|
|
@select="handleSelect"
|
|
>
|
|
<template v-for="(item,index) in navigations" :key="index">
|
|
<template v-if="item.children && item.children.length > 0">
|
|
<el-sub-menu :index="`${index}`">
|
|
<template #title><span class="text-gray-900 hover:text-green-700 text-[1rem]">{{ item.title }}</span></template>
|
|
<template v-for="(sub,subIndex) in item.children" :key="subIndex">
|
|
<template v-if="sub.children && sub.children.length > 0">
|
|
<el-sub-menu :index="`${index}-${subIndex}`">
|
|
<template #title><p class="text-base">{{ sub.title }}</p></template>
|
|
<el-menu-item v-for="(sub2,sub2Index) in sub.children" :key="sub2Index" :index="`${index}-${subIndex}-${sub2Index}`">
|
|
<nuxt-link :to="navTo(sub2)" class="text-base">{{ sub2.title }}</nuxt-link>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
</template>
|
|
<template v-else>
|
|
<el-menu-item :index="`${index}-${subIndex}`">
|
|
<nuxt-link :to="sub.path" class="text-base"><el-space><el-image v-if="sub.icon" class="ws-icon" :src="sub.icon" />{{ sub.title }}</el-space></nuxt-link>
|
|
</el-menu-item>
|
|
</template>
|
|
</template>
|
|
</el-sub-menu>
|
|
</template>
|
|
<el-menu-item v-else :index="`${index}`">
|
|
<nuxt-link :to="navTo(item)" class="text-base">{{ item.title }}</nuxt-link>
|
|
</el-menu-item>
|
|
</template>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.el-menu--horizontal > .el-menu-item:nth-child(1) {
|
|
margin-right: auto;
|
|
}
|
|
.el-menu{
|
|
border-bottom: none;
|
|
}
|
|
.ws-icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.el-menu-item:hover{
|
|
outline: 0 !important;
|
|
color: #1b850c !important;
|
|
background-color: #f1f8eb !important;
|
|
}
|
|
.el-menu-item.is-active {
|
|
color: #1b850c !important;
|
|
background: #FFFFFF !important;
|
|
}
|
|
.el-sub-menu .el-sub-menu__title:link{
|
|
color: #ff9900;
|
|
}
|
|
.el-sub-menu:hover{
|
|
color: #ff9900;
|
|
}
|
|
.text-base:hover{
|
|
color: #1b850c;
|
|
}
|
|
//
|
|
//$--menu-item-hover-fill: #ff0000;
|
|
//$--el-menu-hover-bg-color: #1b850c;
|
|
.el-menu--horizontal {
|
|
color: #f1ffec;
|
|
background-color: #1b850c;
|
|
}
|
|
</style>
|