vue项目iview和ant-design树图标的修改

最新推荐文章于 2023-07-28 09:24:46 发布

bingot

最新推荐文章于 2023-07-28 09:24:46 发布

阅读量3.1k

点赞数 1

分类专栏： vue 文章标签： vue css treeview

本文链接：https://blog.csdn.net/bingot/article/details/103709804

版权

本文介绍了如何在Vue项目中，针对iview和ant-design的树形组件修改图标。首先使用iconfont并将其引入项目。对于iview，通过在`renderParent`函数中设置变量`type`，并根据数据动态赋予不同的class来实现图标替换。在CSS中阻止默认图标旋转，并使用自定义的字体图标。关键在于设置`content`为阿里图标Unicode，并指定`font-family: 'iconfont'`。对于ant-design，利用slot API，在树节点上插入插槽，根据后端返回数据决定是否添加图标。通过类似iview的方法，可以完成ant-design树图标的替换。

摘要由CSDN通过智能技术生成

修改图标之前先准备iconfont，我用的是阿里矢量图，如何引入项目，网上已经有很多的教程了，这里我就不再重复了。
废话不多说，直接贴代码

iview

用的是官网这个例子：
在这里插入图片描述
思路：js在renderParent函数定义一个变量type，然后根据返回数据判断用那个class，赋值就完事了。css先禁止图标的旋转，然后把view的字体图标换成自己想要的字体图标。
最后的效果：

 renderContent(h, {
    root, node, data }) {
   
 //定义type，根据返回的数据是否有children判断用那个class
      let type = data.children.length > 0 ? "ios-folder-outline" : "ios-paper-outline";
      data.selected = false;
      let btns = (
        <span
          style={
   {
   
            display: "inline-block",
            float: "right",
            marginRight: "32px"
          }}
        >
          {
   !data.leaf && (
            <Button
              icon="ios-add"
              size="small"
              style={
   {
   
                marginRight: "8px"
              }}
              onClick={
   this.showAddMenu.bind(this, data)}
            />
          )}{
   " "}
          {
   data.childrenCount ===