5 Star 12 Fork 3

WangXinXin / react-antd-admin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
menu.js 5.28 KB
一键复制 编辑 原始数据 按行查看 历史
WangXinXin 提交于 2017-05-04 16:34 . first init
/**
* 定义sidebar和header中的菜单项
*
* 一些约定:
* 1.菜单最多3层;
* 2.只有"叶子"节点才能跳转;
* 3.所有的key都不能重复;
*/
// 其实理论上可以嵌套更多层菜单的, 但是我觉得超过3层就不好看了
// 可用的图标见这里: https://ant.design/components/icon-cn/
// 定义siderbar菜单
const sidebarMenu = [
{
key: 'index', // route时url中的值
name: '菜单哈哈哈', // 在菜单中显示的名称
icon: 'smile', // 图标是可选的
child: [
{
key: 'option1',
name: '模拟CRUD',
icon: 'play-circle', // 二级三级菜单也可以带图标
},
{
key: 'option2',
name: '图片DEMO',
icon: 'android',
},
{
key: 'option3',
name: '自定义操作',
icon: 'bulb',
},
],
},
{
key: 'alone',
name: '我没有子菜单',
icon: 'clock-circle',
},
{
key: 'alone2',
name: '我没有图标',
},
{
key: 'noiconhaha',
name: '又一个没图标的',
child: [
{
key: 'nesnesnes',
name: 'N64',
},
],
},
{
key: 'daohang',
name: '导航',
icon: 'appstore',
child: [
{
key: '555',
name: '选项5',
},
{
key: 'sanji', // 最多只能到三级导航
name: '三级导航',
icon: 'laptop',
child: [
{
key: '666',
name: '选项6',
icon: 'check',
},
{
key: '777',
name: '选项7',
icon: 'close',
},
{
key: '888',
name: '选项8',
},
{
key: '999',
name: '选项9',
},
],
},
],
},
{
key: 'test',
name: '测试',
icon: 'eye',
child: [
{
key: 'aaa',
name: '选项a',
},
{
key: 'bbb',
name: '选项b',
icon: 'pause',
},
{
key: 'ccc',
name: '选项c',
},
{
key: 'sanjiaaa', // 最多只能到三级导航
name: '三级导航aaa',
child: [
{
key: '666aa',
name: '选项6',
icon: 'meh',
},
],
},
{
key: 'sanjibbb', // 最多只能到三级导航
name: '三级导航bbb',
child: [
{
key: '666bb',
name: '选项6',
},
],
},
],
},
];
export default sidebarMenu;
// 定义header菜单, 格式和sidebar是一样的
// 特殊的地方在于, 我规定header的最右侧必须是用户相关操作的菜单, 所以定义了一个特殊的key
// 另外注意这个菜单定义的顺序是从右向左的, 因为样式是float:right
export const headerMenu = [
{
// 一个特殊的key, 定义用户菜单, 在这个submenu下面设置icon/name不会生效
key: 'userMenu',
child: [
{
key: 'modifyUser',
name: '修改用户信息',
icon: 'bulb',
// 对于headerMenu的菜单项, 可以让它跳到外部地址, 如果设置了url属性, 就会打开一个新窗口
// 如果不设置url属性, 行为和sidebarMenu是一样的, 激活特定的组件, 注意在index.js中配置好路由, 否则会404
url: 'http://jxy.me',
},
{
key: 'user222',
name: '药药切克闹',
icon: 'rocket',
},
{
key: 'user333',
name: '选项3',
child: [
{
key: 'user333aaa',
name: 'user333aaa',
icon: 'windows',
},
{
key: 'user333bbb',
name: 'user333bbb',
url: 'http://jxy.me',
},
],
},
],
},
{
key: 'headerMenu2',
name: 'header菜单',
icon: 'team',
child: [
{
key: 'headerMenu111',
name: '菜单项1',
icon: 'windows',
url: 'http://jxy.me',
},
{
key: '菜单项2',
name: '短信表管理',
url: 'http://jxy.me',
},
{
key: '菜单项3',
name: '选项3',
icon: 'chrome',
url: 'http://jxy.me',
},
],
},
{
key: 'headerMenu3',
name: '我没有子菜单',
icon: 'setting',
url: 'http://jxy.me',
},
{
key: 'headerMenu4',
name: '我也没有子菜单',
icon: 'shopping-cart',
},
{
key: 'headerMenu5',
name: '我没有图标',
child: [
{
key: 'headerMenu5000000',
name: '二级导航无子菜单',
},
{
key: 'headerMenu51111',
name: '三级导航',
icon: 'laptop',
child: [
{
key: 'headerMenu51111aa',
name: '选项6',
icon: 'meh',
},
{
key: 'headerMenu51111bb',
name: '选项7',
icon: 'inbox',
},
],
},
{
key: 'headerMenu52222',
name: '三级导航无图标',
child: [
{
key: 'headerMenu52222aa',
name: '选项8',
},
{
key: 'headerMenu52222bb',
name: '选项9',
},
],
},
],
},
];
1
https://gitee.com/winer632/react-antd-admin.git
git@gitee.com:winer632/react-antd-admin.git
winer632
react-antd-admin
react-antd-admin
master

搜索帮助