52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { useRoute } from 'vue-router';
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
import LeftMenuItem from './LeftMenuItem.vue';
|
||
|
|
|
||
|
|
const route = useRoute();
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
item: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
group: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const item = computed(() => props.item);
|
||
|
|
const isOpened = computed(() => {
|
||
|
|
const { matched } = route;
|
||
|
|
const { name } = item.value;
|
||
|
|
|
||
|
|
return matched.some((item) => item.name === name);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<q-expansion-item
|
||
|
|
:group="props.group"
|
||
|
|
active-class="text-primary"
|
||
|
|
:label="item.title"
|
||
|
|
:to="{ name: item.name }"
|
||
|
|
expand-separator
|
||
|
|
:default-opened="isOpened"
|
||
|
|
>
|
||
|
|
<template #header>
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-icon :name="item.icon"></q-icon>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>{{ t(item.title) }}</q-item-section>
|
||
|
|
<q-item-section side>
|
||
|
|
<slot name="side" :item="item" />
|
||
|
|
</q-item-section>
|
||
|
|
</template>
|
||
|
|
<template v-for="section in item.children" :key="section.name">
|
||
|
|
<left-menu-item :item="section" />
|
||
|
|
</template>
|
||
|
|
</q-expansion-item>
|
||
|
|
</template>
|