ant design pro vue 动态菜单,ant design pro教程
本文主要介绍Ant Design Pro菜单自定义图标，有很好的参考价值。希望对你有帮助。来和边肖一起看看吧。
Ant Pro的官方文档描述了菜单中自定义图标的使用。
由于umi的限制，不能只在router.config.js Pro中直接使用组件，暂时支持使用ant.design本身的图标类型和一个img的url。直接在icon属性上配置就可以了。如果是url，Pro会自动将其作为img标签处理。
如果这还不够，您可以自定义getIcon方法。
如果要使用iconfont的图标，可以使用ant.desgin的自定义图标。
1. getIcon方法
/* eslint no-used-escape:0 */
const reg=/(((^https？(?\/\/)?)(?[-;=\ \$，\w] @)？【A-Za-z0-9。-] (?\d)？(?www。[-;=\ \$，\ w]@)【A-Za-z0-9。-] )((?\/[\ ~%\/.\w-_]*)？\?(?[-\=;%@.\w_]*)#？(?[\w]*))？)$/;
导出函数isUrl(路径){
返回reg.test(路径)；
}
从导入{ isUrl }./utils/utils ；
const getIcon=icon={
if (typeof icon===string) {
if (isUrl(icon)) {
return Icon component={()=img src={ Icon } alt= Icon class name={ styles . Icon }/}/；
}
if(icon . starts with( icon-){
return icon font type={ icon }/；
}
返回图标类型={ Icon }/；
}
返回图标；
};
GetIcon来自AntD Pro的源代码。getIcon非常全面，你可以使用Icon(使用AntD提供的图标)、IconFont(使用www.iconfont.cn仓库的图标)或者静态资源文件(img src={.}/转换成图标)；
在实际项目中，经常需要用公司设计师设计的图标来代替，所以我做了一个简单的转换。
const MenuIcon=({imgStyle，imgSrc})=(
图标
component={()=(
图片
style={ {宽度： 1em ，高度： 1em ，imgStyle}}
src={imgSrc}
alt=icon
/
)}
/
);
//示例
//imgStyle是因为UI剪切块大小经常不准确，img位置需要微调。
const menuData=[
{
名称：主页，
icon: MenuIcon imgSrc={require(./assets/menu . png )} img style={ { margin bottom:5 } }/，
路径：“主页”，
},
]
注意：img width height设置为1em，这样可以适应父组件的大小，实现菜单打开/关闭时画面的缩放。如果给定一个特定的值，就没有缩放效果！
2. 使用ant.desgin的自定义图标（使用 svg）.
用图标组件封装可重用的自定义图标。您可以通过component属性传入一个组件，以呈现满足特定要求的最终图标。
该代码来自antd官方文件图标自定义图标。
从“antd”导入{ Icon }；
const HeartSvg=()=(
SVG width= 1em height= 1em fill= current color viewBox= 0 0 1024 1024
路径d= M923 283.6 c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39
/svg
);
const PandaSvg=()=(
svg视图框=0 0 1024 1024 宽度=1em 高度=1em 填充=currentColor
小路
d= m 99.096 315.634s-82.58-64.032-82.58-132.13 c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162 l-165.162
fill=#6B676E
p-id=1143
/
小路
d= m 1024 561.548 c0 264.526-229.23 429.42-512.002 429.42 s0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548 z
fill=#FFEBD2
p-id=1144
/
小路
d= m 330.324 842.126 c 0 82.096 81.34 148.646 181.678 148.646s 181.678-66.55 181.678-148.646h 330.324 z
fill=#E9D7C3
p-id=1145
/
小路
d= m 644.13 611.098 c 594.582 528.516 561.55 512 512 512.002 512 c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.77
fill=#FFFFFF
p-id=1146
/
小路
d= m 611.098 495.484 c 0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096 c-49.548-33.034
fill=#6B676E
p-id=1147
/
小路
d= m 512.002 726.622 c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.000
fill=#464655
p-id=1148
/
小路
d= m 330.324 495.484m-33.032 0a 33.032 33.032 01 066.064 033.032 33.032 01 0Z-66.064 0Z
fill=#464655
p-id=1149
/
小路
d= m 693.678 495.484m-33.032 0a 33.032 33.032 01 066.064 033.032 33.032 01 0Z-66.064 0Z
fill=#464655
p-id=1150
/
/svg
);
const heart Icon=props=Icon component={ heart SVG } {.道具}/;
const PandaIcon=props=Icon component={ panda SVG } {.道具}/;
ReactDOM.render(
自定义图标列表
心形图标style={ { color:热粉色 } }/
PandaIcon style={ { font size: 32px } }/
/div，
挂载节点，
);
补充知识：Ant Design Pro Of Vue 项目中路由菜单icon 修改或新增
在配置/路由器。配置。射流研究…中修改，直接从蚂蚁设计图标取，只要图标组件的类型值即可。
如：
a-icon type=user /
以上这篇蚂蚁设计专业版菜单自定义图标就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。