123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- <template>
- <div v-if="!item.hidden && item.children" class="menu-wrapper">
- <router-link
- v-if="hasOneShowingChild(item.children, item) && onlyOneChild.value && !onlyOneChild.value.children && !item.alwaysShow"
- :to="resolvePath(onlyOneChild.value.path)"
- >
- <el-menu-item :index="resolvePath(onlyOneChild.value.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
- <svg-icon v-if="onlyOneChild.value.meta && onlyOneChild.value.meta.icon" :icon-class="onlyOneChild.value.meta.icon"></svg-icon>
- <span>{{ $t(onlyOneChild.value.meta.title) }}</span>
- </el-menu-item>
- </router-link>
- <el-submenu v-else :index="item.name || item.path">
- <template #title>
- <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
- <el-tooltip
- v-if="item.meta && item.meta.title"
- effect="dark"
- :content="$t(item.meta.title)"
- :disabled="$t(item.meta.title).length < 6"
- placement="right"
- >
- <span>{{ $t(item.meta.title) }}</span>
- </el-tooltip>
- </template>
- <template v-for="child in item.children" v-if="child && !child.hidden">
- <sidebar-item
- v-if="child.children && child.children.length > 0"
- :key="child.path"
- is-nest
- class="nest-menu"
- :item="child"
- :base-path="resolvePath(child.path)"
- />
- <router-link v-else :to="resolvePath(child.path)" :key="child.name">
- <el-menu-item :index="resolvePath(child.path)">
- <svg-icon v-if="child.meta && child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
- <el-tooltip
- v-if="child.meta && child.meta.title"
- effect="dark"
- :content="$t(child.meta.title)"
- :disabled="$t(child.meta.title).length < 6"
- placement="right"
- >
- <span class="item-child">{{ $t(child.meta.title) }}</span>
- </el-tooltip>
- </el-menu-item>
- </router-link>
- </template>
- </el-submenu>
- </div>
- </template>
-
- <script lang="ts" setup>
- import { ref } from 'vue';
- /* import { defineProps } from 'vue'; */
- import path from 'path-browserify';
- import { useI18n } from 'vue-i18n';
- const props = defineProps<{
- item: any;
- isNest?: boolean;
- basePath?: string;
- }>();
- const { t } = useI18n();
- const onlyOneChild = ref<any>(null);
- const hasOneShowingChild = (children: any[], item: any) => {
- const showingChildren = children.filter((child) => {
- if (child.hidden) {
- return false;
- } else {
- onlyOneChild.value = child;
- console.log("onlyOneChild:",onlyOneChild);
- return true;
- }
- });
- if (showingChildren.length === 1) {
- if (item.redirect === 'dashboard' || item.name === 'dashboard') {
- return true;
- } else {
- return false;
- }
- }
- return false;
- };
- const resolvePath = (...paths: string[]) => {
- return path.resolve(props.basePath || '', ...paths);
- };
- </script>
-
- <!-- <style scoped lang="scss">
- span {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: calc(100% - 50px);
- display: inline-block;
- }
-
- .item-child {
- width: 100% !important;
- }
- </style> -->
|