SidebarItem.vue 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <div v-if="!item.hidden" class="menu-wrapper">
  3. <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
  4. <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
  5. <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
  6. <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
  7. </el-menu-item>
  8. </app-link>
  9. </template>
  10. <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
  11. <template slot="title">
  12. <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
  13. </template>
  14. <sidebar-item
  15. v-for="child in item.children"
  16. :key="child.path"
  17. :is-nest="true"
  18. :item="child"
  19. :base-path="resolvePath(child.path)"
  20. class="nest-menu"
  21. />
  22. </el-submenu>
  23. </div>
  24. </template>
  25. <script>
  26. import path from 'path'
  27. import { isExternal } from '@/utils/validate'
  28. import Item from './Item'
  29. import AppLink from './Link'
  30. import FixiOSBug from './FixiOSBug'
  31. export default {
  32. name: 'SidebarItem',
  33. components: { Item, AppLink },
  34. mixins: [FixiOSBug],
  35. props: {
  36. // route object
  37. item: {
  38. type: Object,
  39. required: true
  40. },
  41. isNest: {
  42. type: Boolean,
  43. default: false
  44. },
  45. basePath: {
  46. type: String,
  47. default: ''
  48. }
  49. },
  50. data() {
  51. // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
  52. // TODO: refactor with render function
  53. this.onlyOneChild = null
  54. return {}
  55. },
  56. methods: {
  57. hasOneShowingChild(children = [], parent) {
  58. const showingChildren = children.filter(item => {
  59. if (item.hidden) {
  60. return false
  61. } else {
  62. // Temp set(will be used if only has one showing child)
  63. this.onlyOneChild = item
  64. return true
  65. }
  66. })
  67. // When there is only one child router, the child router is displayed by default
  68. if (showingChildren.length === 1) {
  69. return true
  70. }
  71. // Show parent if there are no child router to display
  72. if (showingChildren.length === 0) {
  73. this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
  74. return true
  75. }
  76. return false
  77. },
  78. resolvePath(routePath) {
  79. if (isExternal(routePath)) {
  80. return routePath
  81. }
  82. if (isExternal(this.basePath)) {
  83. return this.basePath
  84. }
  85. return path.resolve(this.basePath, routePath)
  86. }
  87. }
  88. }
  89. </script>