"name": "vue-antd-pro", "version": "3.0.2", "ant-design-vue": "^1.7.6", "vue": "^2.6.14" } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 参考: Ant Design Pro 2(动态路由和菜单) - 简书 一共要修改的文件 src/router/index.js src/router/generator-routers.js src/permission....
1、如上图所示,打开/src/common/menu.js可以看到菜单列表 其中menuData 是菜单数组,其中每个对象表示一个菜单 name 表示菜单的名字 path 表示菜单的路由地址名称 icon 表示菜单的icon anthority 表示权限控制可以是字符串也可以数组,参数是准入身份 children 表示菜单下的二级目录 2、菜单配好后我们看routes文件夹,ro...
Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon 由于umi 的限制,在 router.config.js 是不能直接只是用组件的,Pro 中暂时支持 使用 ant.design 本身的 icon type,和传入一个 img 的 url。只需要直接在 icon 属性上配置即可,如果是个 url,Pro 会自动处理为一个 img 标签。 如果这样还不能满足需求...
将服务器下发的icon字符串转换为对应的Icon图标 const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] => menuList.map(item => { const localItem = { ...item, icon:iconEnum[item.icon], children: item.children ? menuDataRender(item.children) : [] }; return Authorized.check(i...
通过@ant-design/icons 引用Icon 组件,不同主题的 Icon 组件名为图标名加主题做为后缀,也可以通过设置 spin 属性来实现动画旋转效果。 自定义图标 利用Icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标,以满足特定的需求。 使用iconfont.cn 的多个资源 @ant-design/icons...
寻找能让菜单的icon图标显示的修改方法 app.tsx中的内容 importfixMenuItemIconfrom'./fixMenultemIcon'; import{SmileOutlined,HeartOutlined,DashboardOutlined}from'@ant-design/icons'; // 引入了第1步中api.ts中定义的currentUserMenus接口,并定义别名queryCurrentUserMenus ...
初探ant design pro 1.增加路由子页面&配置菜单 因为ant design pro采取的是umi路由配置,所以只要在对应的文件夹下新建相关的文件夹以及文件,它会自动解析。按照如下的步骤做即可 PS.如果想要给菜单配置icon,ant design pro有一些通用的icon图标,可以在上面配置路由的时候在每个路由处都加上 icon:'iconname' 即可,...
** 1:引入icon** ** 2:菜单数据处理函数** consttoHump=(name:string)=>name.replace(/-(\w)/g,(all:string,letter:any)=>letter.toUpperCase());constformatter=(data:any[])=>{data.forEach(item=>{if(item.icon){const{icon}=item;constv4IconName=toHump(icon.replace(icon[0],icon[0].toUp...
浅谈AntDesignPro菜单⾃定义icon Ant Design Pro 官⽅⽂档说明 由于 umi 的限制，在 router.config.js 是不能直接只是⽤组件的，Pro 中暂时⽀持使⽤本⾝的 icon type，和传⼊⼀个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会⾃动处理为⼀ 个 img 标签。如果...
icon截图.png 至此,可以将图标下方的type,如:icon-weixin,设置到路由中的icon上,即可设置成功。 在业务组件中使用iconfont // 在本项目中使用iconfont图标import{createFromIconfontCN}from'@ant-design/icons'exportdefaultcreateFromIconfontCN({// 该地址为iconfont中的项目地址,根据实际进行修改scriptUrl:'//at.ali...