Ant Design Pro 4 动态菜单icon丢失解决办法

最近在开发人事管理系统，其中菜单是需要动态渲染，针对不同角色授权不同的菜单权限。

路由由后端返回，格式如下：

[ { "path": "/", "name": "dashboard", "icon": "DesktopOutlined", "component": "./dashboard/workplace", }, { "name": "management", "path": "/auth", "icon": "TeamOutlined", "children": [ { "name": "username", "path": "/auth/user", "component": "./auth/user", "hideInMenu": false }, { "name": "role", "path": "/auth/role", "component": "./auth/role", "hideInMenu": false }, { "name": "permission", "path": "/auth/permission", "component": "./auth/permission", "hideInMenu": false } ] }, { "name": "organization", "path": "/organization", "icon": "ApartmentOutlined", "children": [ { "name": "department", "path": "/organization/department", "component": "./organization/department", "hideInMenu": false }, { "name": "position", "path": "/organization/position", "component": "./organization/position", "hideInMenu": false } ] }, { "name": "staff", "path": "/staff", "icon": "UserOutlined", "children": [ { "name": "roster", "path": "/staff/roster", "component": "./staff/roster", "hideInMenu": false } ] } ]

菜单可以正常生成，然而icon图标缺失...

网上度娘了一下，也没找到比较满意的解决方案，回到官网看了在看了文档https://v4-pro.ant.design/docs/router-and-nav-cn

这种插件的方式在config.ts中配置的静态菜单是没问题的,但如果是后台传入的动态菜单这种方式并没有效果.调试发现 umi-plugin-antd-icon-config只在初始化的时候运行一次,为了解决动态菜单的icon加载问题,决定从插件入手,把核心代码写到 BasicLayout.

在BasicLayout 引入

import allIcons from '@@/plugin-antd-icon/icons';

菜单函数处理

// 解决图标问题

// const toHump = (name) =>name.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());

const menuDataRender = (menuList) =>

menuList.map((item) => {

if (item.icon) {

const { icon } = item;

// const v4IconName = toHump(icon.replace(icon[0], icon[0].toUpperCase()));

const NewIcon = allIcons[icon];

if (NewIcon) {

try {

// eslint-disable-next-line no-param-reassign

item.icon = React.createElement(NewIcon);

} catch (error) {

console.log(error);

}

保存就解决了icon图标问题

Ant Design Pro 4 动态菜单icon丢失解决办法相关推荐

ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
ant design pro实现动态路由以及权限的控制
dynamic-menu-router ant design pro动态路由权限,目前基于ant design pro1.4.4版本,只用于左侧菜单权限的设置和按钮权限设置,关于最新版本权限的更新,敬 ...
ant design pro侧边栏子菜单添加不成功的解决办法
项目场景: Ant design pro侧边栏添加子菜单问题描述: 在企业工作中 Ant design pro侧边栏添加子菜单如果不成功要检查以下几个部分原因分析: 刚进公司的新员工如果接触到新的 ...
Ant Design Pro组件pro-layout菜单自定义icon，以及二级菜单不显示icon处理
使用IconFont IconFont官网,进入后我们登陆,然后创建一个项目管理图中的连接是Icon的地址,需要把它放到我们项目配置下的iconfontUrl参数下注意!!! 创建项目时 Font ...
同志们,免费版的Ant Design Pro Vue3 来啦
Vue3也出了一段时间了,于是照着ant pro vue搭个免费的vue3版希望大家喜欢基于 Vite2 Vue3 Ant-Design-of-Vue2 TS实现的 Ant Design Pro ...
UmiJS TypeScript Ant Design Pro v4 从零开始实战教程（63 个视频）
UmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程(63 个视频) Antd Pro 是国内最流行的前端后台框架,使用它可以轻易搭建一个超级 ...
Umi v3 Ant Design Pro v5 从零开始实战视频教程（34 个视频）
Umi v3 & Ant Design Pro v5 从零开始实战视频教程(34 个视频) Umi v3 & Ant Design Pro v5 视频教程,从零开始学习,搭建一个完整的 ...
Ant Design Pro 菜单自定义 icon
Ant Design Pro 官方文档说明在菜单中使用自定义的 icon 由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,Pro 中暂时支持使用 ant.des ...

Ant Design Pro 4 动态菜单icon丢失解决办法

Ant Design Pro 4 动态菜单icon丢失解决办法相关推荐

最新文章

热门文章