SidebarItem.vue 2.8 KB

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