ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法

第一步:

去阿里巴巴矢量库生成项目图标。复制以下代码:

第二步:

打开项目组件中Menu/menu.js.

第三步:

引入Icon组件并添加以下代码，scriptUrl为你自己项目生成的url.

第四步：

在此事例中引入iconfont组件。

 components: {IconFont},

第五步:

找到renderIcon函数，新增以下代码:

点击保存，就可以支持icon-font了。需要注意的是后台返回的菜单meta.icon中字段要以"icon-"开头，阿里巴巴矢量库中图标也要已’icon-'开头(默认也是以icon-开头的)。与上图代码相对应。如下：

然后就可以了，不信你试一下。

ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法相关推荐

Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue--蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤: 一.Ant Design Pro of Vue 的介绍 Ant ...
Ant Design Pro of Vue方案一权限路由配置（一步步完成，包括所有后端数据库代码，萌新向）
Ant Design Pro of Vue方案一权限路由配置(一步步完成,包括所有后端数据库代码,萌新向) 参考了许多csdn的文章,感谢大家为社区做的贡献,我也来汇总一波,谢谢
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...
uni-app引入阿里巴巴矢量库（iconfont）图标
标题uni-app引入阿里巴巴矢量库(iconfont)图标进入官网,下载到本地需要使用的的文件在uni项目中根目录下的static下创建文件夹iconfont 将这里这个iconfont.cs ...
Ant design pro v4-服务器菜单和路由权限控制
要解决的问题:ant design pro默认情况下,菜单和路由都用配置的方式,在前端的config/config.ts中配置.但是大多数后台系统都需要由后端服务器控制权限. 类似的需求一般包括两点: ...
Ant design Pro of vue 实战一
一.进首页最右边的设置去掉 src\layouts\BasicLayout.vue 把这三个地方去掉,就没有设置了二.改主题色菜单选中的背景色 src\config\defaultSettin ...
Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件
先上整体代码: const beforeSearchSubmit = (par) => {//par 就是你搜索表单输入的内容 }<ProTableheaderTitle="查询 ...
Ant Design Pro 中 ProTable受控菜单 class类与构造函数
// class 类 state = {// 列表受控模式columnsStateMap: {btId: { show: false }, // 需要受控的字段名(btId)},};// 在组件中 & ...
搭建Vue版Ant Design Pro后台管理系统
搭建Vue版Ant Design Pro后台管理系统此文章通过基于Vue实现的Ant DesignPro脚手架快速构建一个后台管理系统的前端相关文档链接 1.[Ant Design Pro of ...