两种方式实现马赛克背景图&五种方式更改el-tree的箭头图标

头像头饰
水冗水孚
     上海
    阅读 9 分钟
    最近要给一个dom元素设置马赛克背景图，以下是两种方式，方便道友们参考

    马赛克效果图

    方式一 使用base64背景图

    <style>
    .mosaic1 {
        width: 300px;
        height: 200px;
        user-select: none;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
    }
</style>
        
<div class="mosaic1"></div>

    方式二 使用渐变背景图

    <style>
    .mosaic2 {
        width: 300px;
        height: 200px;
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
        background-image: linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0), linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
    }
</style>

<div class="mosaic2"></div>
    注意dom的宽高，要是background-size的大小的倍数

    完整代码

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mosaic1 {
            width: 300px;
            height: 200px;
            user-select: none;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
        }

        .mosaic2 {
            width: 300px;
            height: 200px;
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
            background-image: linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0), linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
        }
    </style>
</head>

<body>
    <div class="mosaic1"></div>
    <br>
    <div class="mosaic2"></div>
</body>

</html>
    最近要修改饿了么Plus中的el-tree的箭头，没有看官方文档，捯饬了好一会，后来发现，官方文档提供了...尴尬，不过这里也分享一下吧，算是一个思路的拓展。毕竟有的组件可能没提供，就得我们自己用css或者js的方式去修改了

    el-tree图标修改效果图

    方式一 js修改指定dom的innerHTML

    <div class="tree1">
  <!-- js修改方式 -->
  <el-tree
    class="myTree1"
    style="max-width: 600px"
    :data="data"
    :props="defaultProps"
    @node-expand="expand"
    @node-collapse="collapse"
  />
</div>

<script lang="ts" setup>
onMounted(() => {
  changeTreeIcon();
});

const changeTreeIcon = () => {
  nextTick(() => {
    let treeIcons = document.querySelectorAll(".tree1 .el-tree-node__expand-icon");
    treeIcons.forEach((icon) => {
      icon.innerHTML = "➡️";
    });
  });
};

const expand = () => {
  changeTreeIcon();
};
const collapse = () => {
  changeTreeIcon();
};
</script>

    方式二 css隐藏+伪元素

    <div class="tree2">
  <!-- css隐藏+伪元素 -->
  <el-tree
    class="myTree2"
    style="max-width: 600px"
    :data="data"
    :props="defaultProps"
  />
</div>

<style scoped lang="less">
:deep(.myTree2) {
  .el-tree-node__expand-icon svg {
    display: none;
  }
  .el-tree-node__expand-icon {
    position: relative;
  }
  .el-tree-node__expand-icon::before {
    content: ">>";
    color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

    方式三 css隐藏+背景图

    <div class="tree3">
  <!-- css隐藏+背景图 -->
  <el-tree
    class="myTree3"
    style="max-width: 600px"
    :data="data"
    :props="defaultProps"
  />
</div>

<style scoped lang="less">
:deep(.myTree3) {
  .el-tree-node__expand-icon svg {
    display: none;
  }
  .el-tree-node__expand-icon {
    background-image: url("./arrow.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
  }
}
</style>

    ./arrow.png

    arrow.png

    方式四、五（饿了么自带的）

    <div class="tree4">
  <!-- 官方api icon字符串时值为饿了么图标的组件里面的图标名 -->
  <el-tree
    icon="DArrowRight"
    class="myTree4"
    style="max-width: 600px"
    :data="data"
    :props="defaultProps"
  />
</div>
<!-- 官方api 组件方式更加可拓展-->
<div class="tree5">
    <el-tree
      :icon="arrow"
      class="myTree5"
      style="max-width: 600px"
      :data="data"
      :props="defaultProps"
    />
</div>

import arrow from "./arrow.vue";

    arrow.vue

    <template>
  <div>🔜</div>
</template>
    总结：多看文档

    完整代码

    <template>
  <div class="treeWrap">
    <div class="tree1">
      <!-- js修改方式 -->
      <el-tree
        class="myTree1"
        style="max-width: 600px"
        :data="data"
        :props="defaultProps"
        @node-expand="expand"
        @node-collapse="collapse"
      />
    </div>
    <div class="tree2">
      <!-- css隐藏+伪元素 -->
      <el-tree
        class="myTree2"
        style="max-width: 600px"
        :data="data"
        :props="defaultProps"
      />
    </div>
    <div class="tree3">
      <!-- css隐藏+背景图 -->
      <el-tree
        class="myTree3"
        style="max-width: 600px"
        :data="data"
        :props="defaultProps"
      />
    </div>
    <div class="tree4">
      <!-- 官方api icon字符串时值为饿了么图标的组件里面的图标名 -->
      <el-tree
        icon="DArrowRight"
        class="myTree4"
        style="max-width: 600px"
        :data="data"
        :props="defaultProps"
      />
    </div>
    <!-- 官方api 组件方式更加可拓展-->
    <el-tree
      :icon="arrow"
      class="myTree5"
      style="max-width: 600px"
      :data="data"
      :props="defaultProps"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, nextTick } from "vue";
import arrow from "./arrow.vue";

onMounted(() => {
  changeTreeIcon();
});

const changeTreeIcon = () => {
  nextTick(() => {
    let treeIcons = document.querySelectorAll(".tree1 .el-tree-node__expand-icon");
    treeIcons.forEach((icon) => {
      icon.innerHTML = "➡️";
    });
  });
};

const expand = () => {
  changeTreeIcon();
};
const collapse = () => {
  changeTreeIcon();
};

const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];

const defaultProps = {
  children: "children",
  label: "label",
};
</script>

<style scoped lang="less">
.treeWrap {
  width: 600px;
  zoom: 1.5;
}
:deep(.myTree2) {
  .el-tree-node__expand-icon svg {
    display: none;
  }
  .el-tree-node__expand-icon {
    position: relative;
  }
  .el-tree-node__expand-icon::before {
    content: ">>";
    color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
:deep(.myTree3) {
  .el-tree-node__expand-icon svg {
    display: none;
  }
  .el-tree-node__expand-icon {
    background-image: url("./arrow.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
  }
}
</style>

    补充第六种

    <div class="tree6">
  <el-tree
    class="myTree6"
    style="max-width: 600px"
    :data="data"
    :props="defaultProps"
  />
</div>

<style scoped lang="less">
.tree6 {
  ::v-deep .el-tree-node__expand-icon::before {
    content: "->";
  }
}
</style>

    image.png

    css3element-plus
    水冗水孚
    1.1k 声望588 粉丝

    每一个不曾起舞的日子，都是对生命的辜负

    « 上一篇
    vue3中修改element plus组件源码并使用，比如自定义额外逻辑的解决思路方式（亲测有效）
    下一篇 »
    Failed to load module script: Expected a JavaScript module scrip

    引用和评论

    推荐阅读
    头像
    😮震鲸😲我用自己写的双色球抽号程序，竟然中奖200元！

    水冗水孚阅读 275

    头像
    开发插件集合

    寒青赞 14阅读 3.6k

    头像
    CSS 如何模拟“真实的”进度条？

    XboxYan赞 8阅读 1.9k评论 2

    头像
    使用flex布局解决经典布局中overflow必须设置高度才能滚动问题

    smallStone阅读 8.1k

    头像
    CSS垂直水平居中

    寒青阅读 2.4k

    头像
    vue3+tauri2.0桌面端后台Exe系统|tauri2+rust+vite5管理系统后台模板

    xiaoyan2017赞 1阅读 836评论 2

    头像
    SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整CSS来改变UI显示风格

    注销阅读 1.7k

    0 条评论
    得票最新