实现效果:

icon属性是放置组件库内置icon,与设计图出入很大,不美观。于是就在csdn搜索有没有自定义本地图标的方法,我看一了圈没有发现。花了点时间自己实现,然后放在csdn中帮助更多的打工人,也方便以后的自己。

icon属性还有另外一个类型,component,可以搭配h函数写一组img元素,就能实现自己想要的效果

<el-timeline  style="margin-left: 55px;">
<el-timeline-item
 v-for="(activity, index) in activities"
 :key="index"
 :type="activity.type"
 :color="activity.color"
 :size="activity.size"
 :hollow="activity.hollow"
 :timestamp="activity.timestamp"
 :icon="renderCustomIcon(activity.icon)"
>
<div class="timeLine-right">
    {{ activity.content }}
  </div>
</el-timeline-item>
</el-timeline>
<script setup>
/*
* { String } 本地图片路径
*/
const renderCustomIcon = (iconSrc) => {
 return h('img',{ src:iconSrc,class:'custom-icon' });
};
</script>
<style>
//时间线左右布局,不建议使用px直接设置偏移量,还是按照自己项目进行调整  
:deep(.el-timeline-item__timestamp) {
  position: absolute;
  left: -55px;
  top: -6px;
}
</style>

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐