3、在 src -> core -> icons.js 中引入: import xiaolian from '@/assets/icons/xiaolian.svg?inline' export { cxiaolian } 4、在config -> router.config.js 中使用: import { cxiaolian } from '@/core/icons' 路由中: meta: { title: 'menu.dashboard', keepAlive: true, icon: cxiaolian...
到此为止,你的前端已经支持了动态Menu了,并且实现了通过mock的方式来调试了。后面,你需要在服务端实现接口Get /v1/menu/getMenuData就可以了。 总结: 经过这六个步骤,你现在已经开启了AntD Pro V4的动态Menu时代。
如果是 antd pro ts 工程的话,可以在这里进行页面的总览配置: //config/route.ts export const routes: IBestAFSRoute[] = [ { path: '/welcome', component: 'IndexPage', name: '欢迎', // 兼容此写法 icon: 'testicon', target: '_blank', // 新页面打开 headerRender: false, // 不展示顶栏...
},menuHeaderRender:undefined,menuItemRender:(menuItemProps, defaultDom) =>{if(menuItemProps.isUrl|| !menuItemProps.path) {returndefaultDom; }// 支持二级菜单显示iconreturn(<Linkto={menuItemProps.path}>{menuItemProps.pro_layout_parentKeys && menuItemProps.pro_layout_parentKeys.length > 0 && ...
icon:"file", name:"help", component:"./Help"}, 类似如下: 2.2做完如上步骤其实功能是完成了,但是 pro2.x版本中加入了菜单国际化中。所以 进行修改: 在src->locales->zh-CN->menu.js->『11行新增如下内容』 ...
icon:'testicon', target:'_blank',// 新页面打开 headerRender:false,// 不展示顶栏 footerRender:false,// 不展示页脚 menuRender:false,// 不展示菜单 menuHeaderRender:false,// 不展示菜单顶栏 access:'canRead',// 权限配置,需要与plugin-access插件配合使用 ...
<Partial<ProSettings>|undefined>({fixSiderbar:true,title:'前端资源网',});// 菜单 loopconstloopMenuItem=(menus:MenuDataItem[]):MenuDataItem[]=>menus.map(({icon,children,...item})=>({...item,icon:icon&&IconMap[iconasstring],children:children&&loopMenuItem(children),}));return(<ProLayout...
找到menuData 的生成方式 image.png routes 就是运行生成的.umi/router.js的内容,将其输出我们可以直观的看见它的具体结构 image.png 修改配置路由 在router.config.js中使用 dynamic 去标志该目录(路由)是动态的 {path:'/profile',name:'profile',icon:'profile',dynamic:true,routes:[{path:'/profile/basic'...
An antdv-based middle and background management system - fix: profile menu icon · antdv-pro/antdv-pro@1b4399d
另外排除插件umi-plugin-antd-icon-config的配置问题,因为使用默认菜单时图标显示正常: 使用默认菜单时ProLayout中的menuDataRender参数输出如下(其中icon字段为ReactElement):Contributor chenshuai2144 commented Feb 6, 2020 是没有支持的,建议你自己实现,在本地提供一个枚举,用于映射 { string: iconDom } Author ...