将节点树的字体颜色设置为节点前的图标颜色

需求:想把下面图中的子节点的文字颜色设为与前面图标的颜色一致

在这里插入图片描述

最终效果:

在这里插入图片描述

实现过程:巨简单,记录下,有需求的可以参考

在这里插入图片描述

    //添加子节点 曲线名
    TreeNode node1 = new TreeNode(series.DataSeries.SeriesName);//定义节点
  	System.Windows.Media.Color mediaColor = series.Stroke;//设置节点前的图标的颜色"#FF9ACD32"
  	string colorStr = mediaColor.ToString().Trim();
  	node1.ForeColor = ColorTranslator.FromHtml(colorStr);//将节点文字颜色设置为节点前的图标颜色

扩展知识:【16进制颜色值与color对象之间相互转化】

	//把十六进制颜色值转化为color对象
	ColorTranslator.FromHtml("#FF000000")
	或 ColorTranslator.FromHtml("Red");
	
	//把color对象转化为十六进制颜色
	ColorTranslator.ToHtml(Color.FromArgb(255,255,255))
	//或 
	ColorTranslator.ToHtml(Color.Red);
	
	btn.ForeColor = ColorTranslator.FromHtml("#FF000000");
可以参考以下代码实现: ``` <template> <div class="nav-container"> <ul class="nav-list"> <li v-for="item in navData" :key="item.id" :class="{active: item.active}"> <div class="parent" @click="toggle(item.id)"> <span class="iconfont" :class="{icon-active: item.active}"> {{ item.icon }} </span> <span>{{ item.name }}</span> <span class="iconfont arrow" :class="{down: item.active, up: !item.active}">  </span> </div> <ul class="child" v-show="item.active"> <li v-for="(child, index) in item.children" :key="index" @click="select(item.id, index)" :class="{active: child.active}"> <span>{{ child.name }}</span> </li> </ul> </li> </ul> </div> </template> <script> export default { data() { return { navData: [ { id: 1, name: '父节点1', icon: '', active: false, children: [ { id: 11, name: '子节点1' }, { id: 12, name: '子节点2' }, { id: 13, name: '子节点3' }, ] }, { id: 2, name: '父节点2', icon: '', active: false, children: [ { id: 21, name: '子节点1' }, { id: 22, name: '子节点2' }, { id: 23, name: '子节点3' }, ] }, { id: 3, name: '父节点3', icon: '', active: false, children: [ { id: 31, name: '子节点1' }, { id: 32, name: '子节点2' }, { id: 33, name: '子节点3' }, ] }, ] } }, methods: { toggle(id) { this.navData.forEach(item => { if (item.id === id) { item.active = !item.active; } else { item.active = false; } }); }, select(parentId, childIndex) { this.navData.forEach(item => { if (item.id === parentId) { item.children.forEach((child, index) => { if (index === childIndex) { child.active = true; } else { child.active = false; } }); item.active = true; } else { item.active = false; item.children.forEach(child => { child.active = false; }); } }); } } } </script> <style> .nav-container { width: 200px; } .nav-list { list-style: none; padding: 0; margin: 0; } .parent { display: flex; align-items: center; padding: 10px 20px; cursor: pointer; } .parent:hover { background-color: #f1f1f1; } .parent .iconfont { font-size: 16px; margin-right: 10px; color: #666; } .parent .icon-active { color: blue; } .parent .arrow { margin-left: auto; } .parent .down { transform: rotate(0deg); } .parent .up { transform: rotate(-180deg); } .child { list-style: none; padding: 0; margin: 0; } .child li { display: flex; align-items: center; padding: 10px 40px; cursor: pointer; } .child li:hover { background-color: #f1f1f1; } .child li.active { background-color: #e1e1e1; } .child li span { color: #666; } .child li.active span { color: blue; } </style> ``` 以上代码实现了左侧导航栏的功能,包括父节点的展开和折叠,子节点的选中和颜色变化,以及点击其他父节点后当节点的展开和其他父节点的折叠。需要注意的是,可以根据自己的需求修改样式和数据结构。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌晓峰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值