element-plus 时间线左右布局,自定义本地图标
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
实现效果:

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


所有评论(0)