ant-design-pro 修改为动态菜单有很多大佬都给了解决方法,就不多说直接进入怎么配置动态icon!!!!
【ant-design|ant-design-pro 动态菜单配置Icon和菜单权限显隐控制】在配置动态菜单时发现,后台接口返回的路由必须要在config.ts中的routes配置,才能正常显示。这下route都确定好了,route中的icon也是确定的,即使接口数据icon不一样,显示依旧会出问题,会显示icon的文字。
文章图片
所以我们就要自定义menu的样式了。
首先在BasicLayout.tsx中查看代码,我的是v4版本,用的是proLayout来搭建的菜单框架,github地址:
https://github.com/ant-design/ant-design-pro-layout/blob/HEAD/README.zh-CN.
BasicLayout.tsx中的代码是直接用的defaultDom,如果我们想动态配置icon的话就要修改 proLayout中的
subMenuItemRender和menuItemRender,这两个的具体作用查看git说明
然后修改成下面这样:
修改成自己的样式,这里render只是修改MenuItem中的部分,不用自己加Menu组件.
subMenuItemRender={(HeaderViewProps, defaultDom) => {
return (
{HeaderViewProps.name}
);
}}
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || menuItemProps.children || !menuItemProps.path) {
return defaultDom;
}
return (
{menuItemProps.name}
);
}}
我使用的是iconfont,没有使用官方的icon,因为是动态配置icon,如果使用官方的引用,那写的太多了。
推荐一个iconfont库:https://www.iconfont.cn/collections/detail?cid=9402
一般还有控制左侧菜单显隐控制的,我开始用自己数据中的visible在menuItemRender中控制,发现隐藏了它还会有li标签占位!!!会有空白的菜单,这就麻烦了,不能有占位啊!仔细一看proLayout的文档发现了这个:
文章图片
hideInMenu,我们根据自己的数据来控制这个值的true/false就可以完美解决了,要认真看文档啊!!!
怎么在ant-design-pro中使用iconfont,官方文档有:https://ant.design/components/icon-cn/#components-icon-demo-iconfont
推荐阅读
- 前端|面试官(谈谈Vue和React的区别())
- react|高德地图的使用及自定义图标
- React|【React Native开发】React Native控件之RefreshControl组件详解(21)
- React|React Native开源项目-嘎嘎商城客户端(持续更新中)
- 工作与生活|2016总结,真正新的里程碑和新起点
- React|【React Native开发】React Native应用设备运行(Running)以及调试(Debugging)(3)
- React|【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)
- React|React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解(20)
- React|【React Native开发】React Native控件之Text组件讲解(9)
- react学习之旅|react+antd-mobile之项目构建+基础配置