antd右侧菜单栏点击更换icon

点击侧边导航的二级菜单时更换一级菜单的icon。

1. 首先，把更换icon前后对应的图片添加到路由里面。

import first from '@/assets/sideBar/first .png';
import firstActive from '@/assets/sideBar/first_active.png';export const routes = [{name: '一级菜单',icon: first,activeIcon: firstActive,id: '1',path: '/first',children: [{name: '二级菜单',path: '/first/firsted',id: '11',},]}
]

2. 在layouts页面里编写代码。

<SubMenu key={v.id} title={v.name} icon={currentSelectKeys.length && Number(currentSelectKeys[0].slice(0, 1)) === i + 1 ? <img src={v.activeIcon} className={'subMenuIcon'} /> : <img src={v.icon} className={'subMenuIcon'} />}>{!!v.children &&v.children.map((value: any, i: number) => {return (<Menu.Item onClick={() => goRoute(value.path)} key={value.id} className={'menuItem'}>{value.name}</Menu.Item>);})}</SubMenu>

antd右侧菜单栏点击更换icon相关推荐

php修改头像怎么做,PHP - 点击更换头像
原理: 操作流程: 首先点击头像图片,弹出选择窗口,选中其中一个则窗口推出头像更换. 效果: 主页面代码: 头像: 子页面代码(弹出窗体页面): 请选择头像: echo ""; } ...
菜单栏点击显示二级菜单_显示完整菜单
菜单栏点击显示二级菜单 On my own computer, I like to see the full menus in Excel, so I selected that setting: 在 ...
HQChart实战教程46-十字光标右侧按钮点击增加刻度线
HQChart实战教程46-十字光标右侧按钮点击增加刻度线功能介绍启动十字光标按钮注册按钮监听事件点击回调函数交流QQ群: 950092318 HQChart代码地址完整的例子代码功能介 ...
利用Jquery特性根据左侧菜单栏点击展现右侧不同内容
刚开始写一个页面需要完成这个需求的时候,我想的是用iframe来进行划分开发或者是写几个htm文件再分别引用不同的内容.询问了同事,发现我的方法比较复杂以此记录一下方便快捷的实现方法.直接通过JQue ...
iOS 点击Application icon加载推送通知Data
今天做APNS远程推送通知遇到了一个问题,就是手机接收到通知的时候,如果马上点击通知的 alert view时候,系统马上唤醒你的Application,通知或调用你的didReceiveLocalN ...
AntD的Table表头title加Icon图标和气泡提示Tooltip
如图,想在Table表单中的描述后面加上Icon图标和气泡提示Tooltip,第一时间找了AntD文档,找到搜索功能及相应图标(filterDropdown和filterIcon),也在百度上找到ht ...
Antd如何在label里增加icon图标
要求样式如下: 翻阅了antd文档,没有直接可插入icon的api.后发现label可以传字符串或者组件. 于是采用了封装组件的方式.(强烈建议官方出label可以自带icon的功能) //需要的fo ...
高德地图marker添加属性、更换icon图标
为高德地图marker添加属性首先创建marker //创建iconvar icon = new AMap.Icon({size: new AMap.Size(25, 34),image: '/im ...
高德地图 - 点击改变当前 marker 图标（marker点击切换 icon 上一个 icon 恢复原样）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

antd右侧菜单栏点击更换icon

antd右侧菜单栏点击更换icon相关推荐

最新文章

热门文章