|
@@ -10,51 +10,63 @@
|
|
|
v-for="route in item.children"
|
|
|
:key="route.path"
|
|
|
:item="route"
|
|
|
+ :default-active="activeMenu"
|
|
|
></vab-menu>
|
|
|
</template>
|
|
|
</component>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import MenuItem from './components/MenuItem'
|
|
|
- import Submenu from './components/Submenu'
|
|
|
- export default {
|
|
|
- name: 'VabMenu',
|
|
|
- components: { MenuItem, Submenu },
|
|
|
- props: {
|
|
|
- item: {
|
|
|
- type: Object,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- routeChildren: {},
|
|
|
- menuComponent: '',
|
|
|
+import MenuItem from './components/MenuItem'
|
|
|
+import Submenu from './components/Submenu'
|
|
|
+export default {
|
|
|
+ name: 'VabMenu',
|
|
|
+ components: { MenuItem, Submenu },
|
|
|
+ computed: {
|
|
|
+ activeMenu() {
|
|
|
+ const route = this.$route
|
|
|
+ const { meta, path } = route
|
|
|
+ // if set path, the sidebar will highlight the path you set
|
|
|
+ if (meta.activeMenu) {
|
|
|
+ return meta.activeMenu
|
|
|
}
|
|
|
+ return path
|
|
|
},
|
|
|
- created() {
|
|
|
- const showChildren = this.handleChildren(this.item.children)
|
|
|
- if (showChildren.length === 0) {
|
|
|
- this.menuComponent = 'MenuItem'
|
|
|
- this.routeChildren = this.item
|
|
|
- } else if (showChildren.length === 1 && this.item.alwaysShow !== true) {
|
|
|
- this.menuComponent = 'MenuItem'
|
|
|
- this.routeChildren = showChildren[0]
|
|
|
- } else {
|
|
|
- this.menuComponent = 'Submenu'
|
|
|
- }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ item: {
|
|
|
+ type: Object,
|
|
|
+ required: true,
|
|
|
},
|
|
|
- methods: {
|
|
|
- handleChildren(children = []) {
|
|
|
- if (children === null) return []
|
|
|
- return children.filter((item) => item.hidden !== true)
|
|
|
- },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ routeChildren: {},
|
|
|
+ menuComponent: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const showChildren = this.handleChildren(this.item.children)
|
|
|
+ if (showChildren.length === 0) {
|
|
|
+ this.menuComponent = 'MenuItem'
|
|
|
+ this.routeChildren = this.item
|
|
|
+ } else if (showChildren.length === 1 && this.item.alwaysShow !== true) {
|
|
|
+ this.menuComponent = 'MenuItem'
|
|
|
+ this.routeChildren = showChildren[0]
|
|
|
+ } else {
|
|
|
+ this.menuComponent = 'Submenu'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChildren(children = []) {
|
|
|
+ if (children === null) return []
|
|
|
+ return children.filter((item) => item.hidden !== true)
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
- .anticon {
|
|
|
- margin-right: 3px !important;
|
|
|
- }
|
|
|
+.anticon {
|
|
|
+ margin-right: 3px !important;
|
|
|
+}
|
|
|
</style>
|