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