59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<template>
|
|
<el-menu-item v-if="!props.children?.length" :index="props.index">
|
|
<template #title>
|
|
<span>{{ props.title }}</span>
|
|
</template>
|
|
</el-menu-item>
|
|
<el-sub-menu v-else-if="props.children.length" :index="props.index + props.title">
|
|
<template #title>
|
|
<span>{{ props.title }}</span>
|
|
</template>
|
|
<KlMenuItem v-for="menu in props.children" :key="menu.path" :title="menu.meta?.title || ''" :children="menu.children" :index="menu.path"></KlMenuItem>
|
|
</el-sub-menu>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { PropType } from 'vue'
|
|
import { RouteRecordRaw } from 'vue-router'
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String as PropType<string>,
|
|
default: '',
|
|
},
|
|
children: {
|
|
type: Array as PropType<RouteRecordRaw[]>,
|
|
default: () => [],
|
|
},
|
|
index: {
|
|
type: String as PropType<string>,
|
|
default: '',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep(.el-sub-menu) {
|
|
.el-menu-item {
|
|
display: flex;
|
|
span {
|
|
text-indent: 6px;
|
|
flex: 1;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 4px;
|
|
background-color: #bcbfc5;
|
|
border-radius: 10px;
|
|
margin-left: -4px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
</style>
|