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

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

时间线左侧正常根据文档内容，是填写的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>

原文地址：https://blog.csdn.net/zero_er/article/details/145199858

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！