(目前图片有点小,还需要自己去调整下大概样式,比较懒,就放了个大概样子)
时间线左侧正常根据文档内容,是填写的icon,但通过icon属性还有另外一个类型,component,可以搭配h函数写一组img元素,实现将图标改为本地图片
<template><el-timeline style="max-width: 600px"><el-timeline-itemv-for="(activity, index) in activities":key="index":timestamp="activity.timestamp":icon="renderCustomIcon(url)">{{ activity.content }}</el-timeline-item></el-timeline></template><script lang="ts" setup>
import {h} from 'vue'
const activities = [{content: 'Event start',timestamp: '2018-04-15',},{content: 'Approved',timestamp: '2018-04-13',},{content: 'Success',timestamp: '2018-04-11',},
]const renderCustomIcon = (url) => {
//url是assets文件夹内图片这种写法,如果是url网络地址,应该直接(src:url)就可以return h('img',{ src:new URL('url',import.meta.url).href,class:'custom-icon' });};</script>