iview修改箭头icon

本文记录了如何修改iview Tree组件的默认箭头图标以匹配设计稿要求。通过引入自定义icon样式并覆盖iview原有的样式实现图标替换。
摘要由CSDN通过智能技术生成

纯粹的遇到就记,零零散散的知识点,不记的话,过后就不一定想的起来了。
iview里有个tree控件,有点ztree的感觉。但是tree控件的箭头icon是这种类型的(如下图,图1)
在这里插入图片描述
这个左箭头的icon是tree自带的,但是设计稿要求的是下面这种(图2)
在这里插入图片描述
那么问题来了,tree控件拿到页面上是已经渲染好的,楞是不好找去哪改。我们之前提到过iview引用自定义icon,但是那个是直接在代码里修改icon的type,替换成你想要的。眼前这个并没有可以修改type的地方。

我们可以通过修改iview默认样式,把咱们需要的icon样式引入,去覆盖掉iview原有的即可。(图3)
在这里插入图片描述
把这部分代码写到你引入tree控件的页面代码里,就覆盖掉了。红色框圈出来的是什么?是你需要用到的icon字体,说的再细一点,就是图2中你要用到的icon,但是你发现图2的icon都是 <Icon type="md-arrow-dropleft" /> 你拿到 md-arrow-dropleft怎么用?所以下面继续上截图,(图4)
在这里插入图片描述
content该怎么换,也就一目了然了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值