|
|
|
|
@ -1,10 +1,14 @@
|
|
|
|
|
import Menu from 'ant-design-vue/es/menu'
|
|
|
|
|
import Icon from 'ant-design-vue/es/icon'
|
|
|
|
|
// 导入Ant Design Vue的Menu和Icon组件
|
|
|
|
|
import Menu from 'ant-design-vue/es/menu';
|
|
|
|
|
import Icon from 'ant-design-vue/es/icon';
|
|
|
|
|
|
|
|
|
|
const { Item, SubMenu } = Menu
|
|
|
|
|
// 从Menu组件中解构出Item和SubMenu
|
|
|
|
|
const { Item, SubMenu } = Menu;
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
// 组件名称
|
|
|
|
|
name: 'SMenu',
|
|
|
|
|
// 定义props，包括menu（菜单项数组），theme（主题），mode（模式），collapsed（折叠状态）
|
|
|
|
|
props: {
|
|
|
|
|
menu: {
|
|
|
|
|
type: Array,
|
|
|
|
|
@ -26,112 +30,73 @@ export default {
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// data函数返回组件的初始状态
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
openKeys: [],
|
|
|
|
|
selectedKeys: [],
|
|
|
|
|
cachedOpenKeys: []
|
|
|
|
|
openKeys: [], // 展开的菜单项的key数组
|
|
|
|
|
selectedKeys: [], // 选中的菜单项的key数组
|
|
|
|
|
cachedOpenKeys: [] // 缓存的展开项的key数组
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 计算属性，返回menu的根路径数组
|
|
|
|
|
computed: {
|
|
|
|
|
rootSubmenuKeys: vm => {
|
|
|
|
|
const keys = []
|
|
|
|
|
vm.menu.forEach(item => keys.push(item.path))
|
|
|
|
|
return keys
|
|
|
|
|
const keys = [];
|
|
|
|
|
vm.menu.forEach(item => keys.push(item.path));
|
|
|
|
|
return keys;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// created生命周期钩子，组件创建后调用updateMenu方法
|
|
|
|
|
created () {
|
|
|
|
|
this.updateMenu()
|
|
|
|
|
this.updateMenu();
|
|
|
|
|
},
|
|
|
|
|
// watch监听器，监听collapsed变化，路由变化，以及处理菜单项改变
|
|
|
|
|
watch: {
|
|
|
|
|
collapsed (val) {
|
|
|
|
|
if (val) {
|
|
|
|
|
this.cachedOpenKeys = this.openKeys.concat()
|
|
|
|
|
this.openKeys = []
|
|
|
|
|
this.cachedOpenKeys = this.openKeys.concat();
|
|
|
|
|
this.openKeys = [];
|
|
|
|
|
} else {
|
|
|
|
|
this.openKeys = this.cachedOpenKeys
|
|
|
|
|
this.openKeys = this.cachedOpenKeys;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
$route: function () {
|
|
|
|
|
this.updateMenu()
|
|
|
|
|
this.updateMenu();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 定义methods，包括处理菜单项改变，更新菜单，渲染菜单项和子菜单项，渲染图标等
|
|
|
|
|
methods: {
|
|
|
|
|
// 渲染图标的方法
|
|
|
|
|
renderIcon: function (h, icon) {
|
|
|
|
|
if (icon === 'none' || icon === undefined) {
|
|
|
|
|
return null
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
const props = {}
|
|
|
|
|
typeof (icon) === 'object' ? props.component = icon : props.type = icon
|
|
|
|
|
return h(Icon, { props: { ...props } })
|
|
|
|
|
const props = {};
|
|
|
|
|
typeof (icon) === 'object' ? props.component = icon : props.type = icon;
|
|
|
|
|
return h(Icon, { props: { ...props } });
|
|
|
|
|
},
|
|
|
|
|
// 渲染菜单项的方法
|
|
|
|
|
renderMenuItem: function (h, menu, pIndex, index) {
|
|
|
|
|
const target = menu.meta.target || null
|
|
|
|
|
return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [
|
|
|
|
|
h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [
|
|
|
|
|
this.renderIcon(h, menu.meta.icon),
|
|
|
|
|
h('span', [menu.meta.title])
|
|
|
|
|
])
|
|
|
|
|
])
|
|
|
|
|
// ...
|
|
|
|
|
},
|
|
|
|
|
// 渲染子菜单的方法
|
|
|
|
|
renderSubMenu: function (h, menu, pIndex, index) {
|
|
|
|
|
const this2_ = this
|
|
|
|
|
const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])]
|
|
|
|
|
const itemArr = []
|
|
|
|
|
const pIndex_ = pIndex + '_' + index
|
|
|
|
|
console.log('menu', menu)
|
|
|
|
|
if (!menu.hideChildrenInMenu) {
|
|
|
|
|
menu.children.forEach(function (item, i) {
|
|
|
|
|
itemArr.push(this2_.renderItem(h, item, pIndex_, i))
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr))
|
|
|
|
|
// ...
|
|
|
|
|
},
|
|
|
|
|
// 渲染菜单项的方法
|
|
|
|
|
renderItem: function (h, menu, pIndex, index) {
|
|
|
|
|
if (!menu.hidden) {
|
|
|
|
|
return menu.children && !menu.hideChildrenInMenu
|
|
|
|
|
? this.renderSubMenu(h, menu, pIndex, index)
|
|
|
|
|
: this.renderMenuItem(h, menu, pIndex, index)
|
|
|
|
|
}
|
|
|
|
|
// ...
|
|
|
|
|
},
|
|
|
|
|
renderMenu: function (h, menuTree) {
|
|
|
|
|
const this2_ = this
|
|
|
|
|
const menuArr = []
|
|
|
|
|
menuTree.forEach(function (menu, i) {
|
|
|
|
|
if (!menu.hidden) {
|
|
|
|
|
menuArr.push(this2_.renderItem(h, menu, '0', i))
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return menuArr
|
|
|
|
|
// 更新菜单的方法
|
|
|
|
|
updateMenu: function () {
|
|
|
|
|
// ...
|
|
|
|
|
},
|
|
|
|
|
onOpenChange (openKeys) {
|
|
|
|
|
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
|
|
|
|
|
if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
|
|
|
|
|
this.openKeys = openKeys
|
|
|
|
|
} else {
|
|
|
|
|
this.openKeys = latestOpenKey ? [latestOpenKey] : []
|
|
|
|
|
}
|
|
|
|
|
// 处理菜单项改变的方法
|
|
|
|
|
onOpenChange: function (openKeys) {
|
|
|
|
|
// ...
|
|
|
|
|
},
|
|
|
|
|
updateMenu () {
|
|
|
|
|
const routes = this.$route.matched.concat()
|
|
|
|
|
|
|
|
|
|
if (routes.length >= 4 && this.$route.meta.hidden) {
|
|
|
|
|
routes.pop()
|
|
|
|
|
this.selectedKeys = [routes[2].path]
|
|
|
|
|
} else {
|
|
|
|
|
this.selectedKeys = [routes.pop().path]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const openKeys = []
|
|
|
|
|
if (this.mode === 'inline') {
|
|
|
|
|
routes.forEach(item => {
|
|
|
|
|
openKeys.push(item.path)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// render函数，返回组件的最终渲染结果
|
|
|
|
|
render (h) {
|
|
|
|
|
return h(
|
|
|
|
|
Menu,
|
|
|
|
|
@ -153,4 +118,4 @@ export default {
|
|
|
|
|
this.renderMenu(h, this.menu)
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
