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.
99 lines
3.2 KiB
99 lines
3.2 KiB
<template> |
|
<el-menu :default-active="active" router :mode="mode" :class="mode" :text-color="state.style.menuColor" |
|
:background-color="mode == 'horizontal' ? state.style.headBg : state.style.menuBg" |
|
:active-text-color="state.style.menuActiveColor" :size="state.size.size"> |
|
<template v-for="menu in data || state.menus"> |
|
<template v-if="menu.children && menu.children.length > 0"> |
|
<el-sub-menu :index="getPath(menu)" :key="menu.path"> |
|
<template #title> |
|
<component class="icon" :is="menu.icon || state.style.menuDefaultIcon"> |
|
</component> |
|
<span>{{ menu.title || t(menu.i18n) }}</span> |
|
</template> |
|
<el-menu-item v-for="child in menu.children" :index="getPath(child)" :router="router"> |
|
<component class="icon" :width="getters.menuIconSize" :height="getters.menuIconSize" |
|
:is="child.icon || state.style.menuDefaultIcon"> |
|
</component> |
|
{{ child.title || t(child.i18n) }} |
|
</el-menu-item> |
|
</el-sub-menu> |
|
</template> |
|
<template v-else> |
|
<el-menu-item :index="getPath(menu)" :key="menu.path" :router="router"> |
|
<component class="icon" :is="menu.icon || state.style.menuDefaultIcon"></component> |
|
<span>{{ menu.title || t(menu.i18n) }}</span> |
|
</el-menu-item> |
|
</template> |
|
</template> |
|
</el-menu> |
|
</template> |
|
<script setup lang="ts"> |
|
import { useStore } from "vuex"; |
|
import { useRouter } from "vue-router"; |
|
import { ref, onMounted, reactive } from "vue" |
|
import { useI18n } from "vue3-i18n"; |
|
const { t } = useI18n(); |
|
|
|
const { state, getters } = useStore() |
|
const props = defineProps({ |
|
mode: { |
|
type: String, |
|
default: 'vertical' |
|
}, |
|
data: { |
|
type: Array<any>(), |
|
default: null |
|
}, |
|
}); |
|
|
|
const style = reactive({ 'margin-right': '10px', width: getters.menuIconSize, height: getters.menuIconSize }) |
|
const router = useRouter(); |
|
const getPath = (menu) => { |
|
const prefix = menu.path.startsWith("/") ? "" : "/"; |
|
return prefix + menu.path; |
|
}; |
|
const active = ref(""); |
|
onMounted(() => { |
|
setTimeout(() => { |
|
active.value = router.currentRoute.value.path.substring(1); |
|
}, 200); |
|
router.push(active.value); |
|
}) |
|
|
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.horizontal { |
|
padding-top: 1px; |
|
height: v-bind('state.size.headHeight'); |
|
border: none; |
|
// display: inline-flex; |
|
} |
|
|
|
.vertical { |
|
padding-top: 1px; |
|
height: v-bind('state.size.mainHeight'); |
|
border: none; |
|
} |
|
|
|
.icon { |
|
margin-right: 10px; |
|
width: v-bind('state.size.menuIconSize'); |
|
height: v-bind('state.size.menuIconSize'); |
|
} |
|
|
|
.el-menu-item.is-active { |
|
background-color: v-bind('state.style.menuActiveBg'); |
|
} |
|
|
|
.vertical .el-sub-menu, |
|
.vertical .el-menu-item { |
|
min-width: v-bind('state.size.asideWidth') !important; |
|
font-size: v-bind('state.size.fontSize') !important; |
|
} |
|
|
|
.horizontal .el-sub-menu, |
|
.horizontal .el-menu-item { |
|
font-size: v-bind('state.size.fontSize') !important; |
|
} |
|
</style>
|
|
|