Skip to content

A
ant-design-pro-vue
Commit 13424f55 by Sendya
Options

Fixed menu that all the other menus gets collapsed to keep the entire menu compact.

parent b25c20c8
Showing with 140 additions and 133 deletions
src/components/menu/SiderMenu.vue
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
import SMenu from './index' import SMenu from './index'
export default { export default {
name: "SiderMenu", name: "SiderMenu",
components: {ALayoutSider, SMenu }, components: { ALayoutSider, SMenu },
props: { props: {
collapsible: { collapsible: {
type: Boolean, type: Boolean,
......
src/components/menu/index.js
...@@ -4,143 +4,149 @@ import Icon from 'ant-design-vue/es/icon' ...@@ -4,143 +4,149 @@ import Icon from 'ant-design-vue/es/icon'
const { Item, SubMenu } = Menu const { Item, SubMenu } = Menu
export default { export default {
name: 'SMenu', name: 'SMenu',
props: { props: {
menu: { menu: {
type: Array, type: Array,
required: true required: true
},
theme: {
type: String,
required: false,
default: 'dark'
},
mode: {
type: String,
required: false,
default: 'inline'
},
collapsed: {
type: Boolean,
required: false,
default: false
}
}, },
data () { theme: {
return { type: String,
rootSubmenuKeys: [], required: false,
openKeys: [], default: 'dark'
selectedKeys: [],
cachedOpenKeys: []
}
}, },
created () { mode: {
this.updateMenu() type: String,
required: false,
default: 'inline'
}, },
watch: { collapsed: {
collapsed (val) { type: Boolean,
if (val) { required: false,
this.cachedOpenKeys = this.openKeys default: false
this.openKeys = [] }
} else { },
this.openKeys = this.cachedOpenKeys data () {
} return {
}, openKeys: [],
'$route': function () { selectedKeys: [],
this.updateMenu() cachedOpenKeys: []
} }
},
computed: {
rootSubmenuKeys: (vm) => {
let keys = []
vm.menu.forEach(item => keys.push(item.path))
return keys
}
},
created () {
this.updateMenu()
},
watch: {
collapsed (val) {
if (val) {
this.cachedOpenKeys = this.openKeys
this.openKeys = []
} else {
this.openKeys = this.cachedOpenKeys
}
}, },
methods: { '$route': function () {
renderIcon: function (h, icon) { this.updateMenu()
return icon === 'none' || icon === undefined ? null }
: h( Icon, { props: { type: icon !== undefined ? icon : '' } }) },
}, methods: {
renderMenuItem: function (h, menu, pIndex, index) { renderIcon: function (h, icon) {
return h( Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, return icon === 'none' || icon === undefined ? null
[ : h(Icon, { props: { type: icon !== undefined ? icon : '' } })
h( },
'router-link', renderMenuItem: function (h, menu, pIndex, index) {
{ attrs: { to: { name: menu.name } }}, return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index },
[ [
this.renderIcon(h, menu.meta.icon), h(
h('span', [menu.meta.title]) 'router-link',
] { attrs: { to: { name: menu.name } } },
) [
] this.renderIcon(h, menu.meta.icon),
) h('span', [ menu.meta.title ])
}, ]
renderSubMenu: function (h, menu, pIndex, index) { )
var this2_ = this ]
var subItem = [h('span', )
{slot: 'title'}, },
[ renderSubMenu: function (h, menu, pIndex, index) {
this.renderIcon(h, menu.meta.icon), const this2_ = this;
h('span', [menu.meta.title]) let subItem = [ h('span',
] { slot: 'title' },
)] [
var itemArr = [] this.renderIcon(h, menu.meta.icon),
var pIndex_ = pIndex + '_' + index h('span', [ menu.meta.title ])
menu.children.forEach(function (item, i) { ]
itemArr.push(this2_.renderItem(h, item, pIndex_, i)) ) ]
}) let itemArr = []
return h( let pIndex_ = pIndex + '_' + index
SubMenu, menu.children.forEach(function (item, i) {
{key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index}, itemArr.push(this2_.renderItem(h, item, pIndex_, i))
subItem.concat(itemArr) })
) return h(
}, SubMenu,
renderItem: function (h, menu, pIndex, index) { { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index },
if (!menu.hidden) { subItem.concat(itemArr)
return menu.children ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index) )
} },
}, renderItem: function (h, menu, pIndex, index) {
renderMenu: function (h, menuTree) { if (!menu.hidden) {
var this2_ = this return menu.children ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index)
var menuArr = [] }
menuTree.forEach(function (menu, i) { },
if (!menu.hidden) { renderMenu: function (h, menuTree) {
menuArr.push(this2_.renderItem(h, menu, '0', i)) const this2_ = this
} let menuArr = []
}) menuTree.forEach(function (menu, i) {
return menuArr if (!menu.hidden) {
}, menuArr.push(this2_.renderItem(h, menu, '0', i))
onOpenChange (openKeys) {
const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
this.openKeys = openKeys
} else {
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.collapsed ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
} }
})
return menuArr
}, },
render (h) { onOpenChange (openKeys) {
return h( const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
Menu, if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
{ this.openKeys = openKeys
props: { } else {
theme: this.$props.theme, this.openKeys = latestOpenKey ? [ latestOpenKey ] : []
mode: this.$props.mode, }
inlineCollapsed: false, },
openKeys: this.openKeys, updateMenu () {
selectedKeys: this.selectedKeys let routes = this.$route.matched.concat()
}, this.selectedKeys = [ routes.pop().path ]
on: { let openKeys = []
openChange: this.onOpenChange, routes.forEach((item) => {
select: (obj) => { openKeys.push(item.path)
this.selectedKeys = obj.selectedKeys })
this.$emit('select', obj) this.collapsed ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
}
}
}, this.renderMenu(h, this.menu)
)
} }
},
render (h) {
return h(
Menu,
{
props: {
theme: this.$props.theme,
mode: this.$props.mode,
inlineCollapsed: false,
openKeys: this.openKeys,
selectedKeys: this.selectedKeys
},
on: {
openChange: this.onOpenChange,
select: (obj) => {
this.selectedKeys = obj.selectedKeys
this.$emit('select', obj)
}
}
}, this.renderMenu(h, this.menu)
)
}
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment