SidebarItem.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <div v-if="!item.hidden && item.children" class="menu-wrapper">
  3. <router-link
  4. v-if="hasOneShowingChild(item.children, item) && onlyOneChild.value && !onlyOneChild.value.children && !item.alwaysShow"
  5. :to="resolvePath(onlyOneChild.value.path)"
  6. >
  7. <el-menu-item :index="resolvePath(onlyOneChild.value.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
  8. <svg-icon v-if="onlyOneChild.value.meta && onlyOneChild.value.meta.icon" :icon-class="onlyOneChild.value.meta.icon"></svg-icon>
  9. <span>{{ $t(onlyOneChild.value.meta.title) }}</span>
  10. </el-menu-item>
  11. </router-link>
  12. <el-submenu v-else :index="item.name || item.path">
  13. <template #title>
  14. <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
  15. <el-tooltip
  16. v-if="item.meta && item.meta.title"
  17. effect="dark"
  18. :content="$t(item.meta.title)"
  19. :disabled="$t(item.meta.title).length < 6"
  20. placement="right"
  21. >
  22. <span>{{ $t(item.meta.title) }}</span>
  23. </el-tooltip>
  24. </template>
  25. <template v-for="child in item.children" v-if="child && !child.hidden">
  26. <sidebar-item
  27. v-if="child.children && child.children.length > 0"
  28. :key="child.path"
  29. is-nest
  30. class="nest-menu"
  31. :item="child"
  32. :base-path="resolvePath(child.path)"
  33. />
  34. <router-link v-else :to="resolvePath(child.path)" :key="child.name">
  35. <el-menu-item :index="resolvePath(child.path)">
  36. <svg-icon v-if="child.meta && child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
  37. <el-tooltip
  38. v-if="child.meta && child.meta.title"
  39. effect="dark"
  40. :content="$t(child.meta.title)"
  41. :disabled="$t(child.meta.title).length < 6"
  42. placement="right"
  43. >
  44. <span class="item-child">{{ $t(child.meta.title) }}</span>
  45. </el-tooltip>
  46. </el-menu-item>
  47. </router-link>
  48. </template>
  49. </el-submenu>
  50. </div>
  51. </template>
  52. <script lang="ts" setup>
  53. import { ref } from 'vue';
  54. /* import { defineProps } from 'vue'; */
  55. import path from 'path-browserify';
  56. import { useI18n } from 'vue-i18n';
  57. const props = defineProps<{
  58. item: any;
  59. isNest?: boolean;
  60. basePath?: string;
  61. }>();
  62. const { t } = useI18n();
  63. const onlyOneChild = ref<any>(null);
  64. const hasOneShowingChild = (children: any[], item: any) => {
  65. const showingChildren = children.filter((child) => {
  66. if (child.hidden) {
  67. return false;
  68. } else {
  69. onlyOneChild.value = child;
  70. console.log("onlyOneChild:",onlyOneChild);
  71. return true;
  72. }
  73. });
  74. if (showingChildren.length === 1) {
  75. if (item.redirect === 'dashboard' || item.name === 'dashboard') {
  76. return true;
  77. } else {
  78. return false;
  79. }
  80. }
  81. return false;
  82. };
  83. const resolvePath = (...paths: string[]) => {
  84. return path.resolve(props.basePath || '', ...paths);
  85. };
  86. </script>
  87. <!-- <style scoped lang="scss">
  88. span {
  89. overflow: hidden;
  90. text-overflow: ellipsis;
  91. white-space: nowrap;
  92. width: calc(100% - 50px);
  93. display: inline-block;
  94. }
  95. .item-child {
  96. width: 100% !important;
  97. }
  98. </style> -->