新增:根据当前路由自动展开菜单

master
chenghx 7 years ago
parent 0aaf3cf893
commit f5b569f170
  1. 19
      src/components/list/ApplicationList.vue
  2. 2
      src/components/list/ArticleList.vue
  3. 19
      src/components/list/ProjectList.vue
  4. 43
      src/components/list/SearchLayout.vue
  5. 22
      src/components/menu/menu.js
  6. 14
      src/router/index.js

@ -0,0 +1,19 @@
<template>
<div>
<a-card style="" :bordered="false">
bbb
</a-card>
</div>
</template>
<script>
import ACard from 'vue-antd-ui/es/card/Card'
export default {
name: 'ApplicationList',
components: {ACard}
}
</script>
<style scoped>
</style>

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<a-card style="" :bordered="false"> <a-card style="" :bordered="false">
aaaa
</a-card> </a-card>
</div> </div>
</template> </template>

@ -0,0 +1,19 @@
<template>
<div>
<a-card style="" :bordered="false">
ccc
</a-card>
</div>
</template>
<script>
import ACard from 'vue-antd-ui/es/card/Card'
export default {
name: 'ProjectList',
components: {ACard}
}
</script>
<style scoped>
</style>

@ -5,7 +5,7 @@
<a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" /> <a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
</div> </div>
<div style="padding: 0 24px"> <div style="padding: 0 24px">
<a-tabs :tabBarStyle="{margin: 0}"> <a-tabs :tabBarStyle="{margin: 0}" @change="navigate" :activeKey="activeKey">
<a-tab-pane tab="文章" key="1"></a-tab-pane> <a-tab-pane tab="文章" key="1"></a-tab-pane>
<a-tab-pane tab="应用" key="2"></a-tab-pane> <a-tab-pane tab="应用" key="2"></a-tab-pane>
<a-tab-pane tab="项目" key="3"></a-tab-pane> <a-tab-pane tab="项目" key="3"></a-tab-pane>
@ -29,7 +29,46 @@ const ATabPane = ATabs.TabPane
export default { export default {
name: 'SearchLayout', name: 'SearchLayout',
components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput} components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput},
data () {
return {
activeKey: ''
}
},
watch: {
'$route': (val) => {
switch (val.path) {
case '/list/search/article':
this.activeKey = '1'
break
case '/list/search/application':
this.activeKey = '2'
break
case '/list/search/project':
this.activeKey = '3'
break
default:
this.activeKey = '1'
}
}
},
methods: {
navigate (key) {
switch (key) {
case '1':
this.$router.push('/list/search/article')
break
case '2':
this.$router.push('/list/search/application')
break
case '3':
this.$router.push('/list/search/project')
break
default:
this.$router.push('/workplace')
}
}
}
} }
</script> </script>

@ -53,9 +53,13 @@ export default {
return { return {
rootSubmenuKeys: ['/form', '/list', '/detail', '/exception', '/result'], rootSubmenuKeys: ['/form', '/list', '/detail', '/exception', '/result'],
openKeys: [], openKeys: [],
selectedKeys: [],
cachedOpenKeys: [] cachedOpenKeys: []
} }
}, },
created () {
this.updateMenu()
},
watch: { watch: {
collapsed (val) { collapsed (val) {
if (val) { if (val) {
@ -64,6 +68,9 @@ export default {
} else { } else {
this.openKeys = this.cachedOpenKeys this.openKeys = this.cachedOpenKeys
} }
},
'$route': function () {
this.updateMenu()
} }
}, },
methods: { methods: {
@ -133,6 +140,15 @@ export default {
} else { } else {
this.openKeys = latestOpenKey ? [latestOpenKey] : [] this.openKeys = latestOpenKey ? [latestOpenKey] : []
} }
},
updateMenu () {
let routes = this.$route.matched.concat()
this.selectedKeys = [routes.pop().path]
let openKeys = []
routes.forEach((item) => {
openKeys.push(item.path)
})
this.openKeys = openKeys
} }
}, },
render (h) { render (h) {
@ -143,10 +159,12 @@ export default {
theme: this.$props.theme, theme: this.$props.theme,
mode: this.$props.mode, mode: this.$props.mode,
inlineCollapsed: false, inlineCollapsed: false,
openKeys: this.openKeys openKeys: this.openKeys,
selectedKeys: this.selectedKeys
}, },
on: { on: {
openChange: this.onOpenChange openChange: this.onOpenChange,
select: (obj) => { this.selectedKeys = obj.selectedKeys }
} }
}, this.renderMenu(h, this.menuData) }, this.renderMenu(h, this.menuData)
) )

@ -17,6 +17,8 @@ import StandardList from '@/components/list/StandardList'
import CardList from '@/components/list/CardList' import CardList from '@/components/list/CardList'
import SearchLayout from '@/components/list/SearchLayout' import SearchLayout from '@/components/list/SearchLayout'
import ArticleList from '@/components/list/ArticleList' import ArticleList from '@/components/list/ArticleList'
import ApplicationList from '@/components/list/ApplicationList'
import ProjectList from '@/components/list/ProjectList'
import WorkPlace from '@/components/dashboard/WorkPlace' import WorkPlace from '@/components/dashboard/WorkPlace'
Vue.use(Router) Vue.use(Router)
@ -105,6 +107,18 @@ export default new Router({
name: '文章', name: '文章',
component: ArticleList, component: ArticleList,
icon: 'none' icon: 'none'
},
{
path: '/list/search/application',
name: '应用',
component: ApplicationList,
icon: 'none'
},
{
path: '/list/search/project',
name: '项目',
component: ProjectList,
icon: 'none'
} }
] ]
} }

Loading…
Cancel
Save