|
|
// 导入Ant Design Vue的Menu和Icon组件
|
|
|
import Menu from 'ant-design-vue/es/menu';
|
|
|
import Icon from 'ant-design-vue/es/icon';
|
|
|
|
|
|
// 从Menu组件中解构出Item和SubMenu
|
|
|
const { Item, SubMenu } = Menu;
|
|
|
|
|
|
// 默认导出Menu组件
|
|
|
export default {
|
|
|
// 组件名称
|
|
|
name: 'SMenu',
|
|
|
// 定义接收的props，包括menu（菜单项数组），theme（主题），mode（模式），collapsed（折叠状态）
|
|
|
props: {
|
|
|
menu: {
|
|
|
type: Array,
|
|
|
required: true
|
|
|
},
|
|
|
theme: {
|
|
|
type: String,
|
|
|
required: false,
|
|
|
default: 'dark'
|
|
|
},
|
|
|
mode: {
|
|
|
type: String,
|
|
|
required: false,
|
|
|
default: 'inline'
|
|
|
},
|
|
|
collapsed: {
|
|
|
type: Boolean,
|
|
|
required: false,
|
|
|
default: false
|
|
|
}
|
|
|
},
|
|
|
// data函数返回组件的初始状态
|
|
|
data () {
|
|
|
return {
|
|
|
openKeys: [], // 展开的菜单项的key数组
|
|
|
selectedKeys: [], // 选中的菜单项的key数组
|
|
|
cachedOpenKeys: [] // 缓存的展开项的key数组
|
|
|
}
|
|
|
},
|
|
|
// 计算属性，返回menu的根路径数组
|
|
|
computed: {
|
|
|
SubmenuKeys: vm => {
|
|
|
const keys = [];
|
|
|
vm.menu.forEach(item => keys.push(item.path));
|
|
|
return keys;
|
|
|
}
|
|
|
},
|
|
|
// mounted生命周期钩子，组件挂载后调用updateMenu方法
|
|
|
mounted () {
|
|
|
this.updateMenu();
|
|
|
},
|
|
|
// 监听器，监听collapsed变化，路由变化，以及处理菜单项改变
|
|
|
watch: {
|
|
|
collapsed (val) {
|
|
|
if (val) {
|
|
|
this.cachedOpenKeys = this.openKeys.concat();
|
|
|
this.openKeys = [];
|
|
|
} else {
|
|
|
this.openKeys = this.cachedOpenKeys;
|
|
|
}
|
|
|
},
|
|
|
$route: function () {
|
|
|
this.updateMenu();
|
|
|
}
|
|
|
},
|
|
|
// 定义methods，包括处理菜单项改变，更新菜单，渲染菜单项和子菜单项
|
|
|
methods: {
|
|
|
// 处理菜单项改变
|
|
|
onOpenChange (openKeys) {
|
|
|
// ...
|
|
|
},
|
|
|
updateMenu () {
|
|
|
const routes = this.$route.matched.concat();
|
|
|
// ...
|
|
|
},
|
|
|
renderItem (menu) {
|
|
|
// 渲染菜单项
|
|
|
// ...
|
|
|
},
|
|
|
renderMenuItem (menu) {
|
|
|
// 渲染菜单项组件
|
|
|
// ...
|
|
|
},
|
|
|
renderSubMenu (menu) {
|
|
|
// 渲染子菜单组件
|
|
|
// ...
|
|
|
},
|
|
|
renderIcon (icon) {
|
|
|
// 渲染图标组件
|
|
|
// ...
|
|
|
}
|
|
|
},
|
|
|
// 定义render函数，返回组件的最终渲染结果
|
|
|
render () {
|
|
|
const { mode, theme, menu } = this;
|
|
|
const props = {
|
|
|
mode: mode,
|
|
|
theme: theme,
|
|
|
openKeys: this.openKeys
|
|
|
};
|
|
|
const on = {
|
|
|
select: obj => {
|
|
|
this.selectedKeys = obj.selectedKeys;
|
|
|
this.$emit('select', obj);
|
|
|
},
|
|
|
openChange: this.onOpenChange
|
|
|
};
|
|
|
const menuTree = menu.map(item => {
|
|
|
if (item.hidden) {
|
|
|
return null;
|
|
|
}
|
|
|
return this.renderItem(item);
|
|
|
});
|
|
|
// 使用Menu组件渲染最终的菜单结构
|
|
|
return (
|
|
|
<Menu vModel={this.selectedKeys} {...{ props, on: on }}>
|
|
|
{menuTree}
|
|
|
</Menu>
|
|
|
);
|
|
|
}
|
|
|
} |
