60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template>
|
|
<component
|
|
:is="menuComponent"
|
|
v-if="!routerInfo.hidden"
|
|
:is-collapse="isCollapse"
|
|
:theme="theme"
|
|
:router-info="routerInfo"
|
|
>
|
|
<template v-if="routerInfo.children&&routerInfo.children.length">
|
|
<AsideComponent
|
|
v-for="item in routerInfo.children"
|
|
:key="item.name"
|
|
:is-collapse="false"
|
|
:router-info="item"
|
|
:theme="theme"
|
|
/>
|
|
</template>
|
|
</component>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AsideComponent',
|
|
}
|
|
</script>
|
|
|
|
<script setup>
|
|
import MenuItem from './menuItem.vue'
|
|
import AsyncSubmenu from './asyncSubmenu.vue'
|
|
import { computed } from 'vue'
|
|
const props = defineProps({
|
|
routerInfo: {
|
|
type: Object,
|
|
default: () => null,
|
|
},
|
|
isCollapse: {
|
|
default: function() {
|
|
return false
|
|
},
|
|
type: Boolean
|
|
},
|
|
theme: {
|
|
default: function() {
|
|
return {}
|
|
},
|
|
type: Object
|
|
}
|
|
})
|
|
|
|
const menuComponent = computed(() => {
|
|
if (props.routerInfo.children && props.routerInfo.children.filter(item => !item.hidden).length) {
|
|
return AsyncSubmenu
|
|
} else {
|
|
return MenuItem
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|