el-timeline时间线（Plus）左边图标改为自定义图片

顾尘眠

已于 2025-01-17 10:12:36 修改

阅读量848

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2025-01-17 10:11:19 首次发布

本文链接：https://blog.youkuaiyun.com/zero_er/article/details/145199858

（目前图片有点小，还需要自己去调整下大概样式，比较懒，就放了个大概样子）

时间线左侧正常根据文档内容，是填写的icon，但通过icon属性还有另外一个类型，component，可以搭配h函数写一组img元素，实现将图标改为本地图片

<template>

  <el-timeline style="max-width: 600px">
    <el-timeline-item
      v-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>