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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/3287.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot:RestTemplate与IllegalArgumentException

问题描述 在SpringBoot应用中&#xff0c;有时会遇到使用RestTemplate调用第三方服务的场景。例如&#xff1a;在进行地名数据采集时&#xff0c;为了拿到地名对应的经纬度位置&#xff0c;通常会有地理编码的步骤&#xff0c;此时就可能涉及到调用第三方接口服务实现此需求。 …

PyTorch使用教程(6)一文讲清楚torch.nn和torch.nn.functional的区别

torch.nn 和 torch.nn.functional 在 PyTorch 中都是用于构建神经网络的重要组件&#xff0c;但它们在设计理念、使用方式和功能上存在一些显著的区别。以下是关于这两个模块的详细区别&#xff1a; 1. 继承方式与结构 torch.nn torch.nn 中的模块大多数是通过继承 torch.nn…

数字小偷:2025年全面防护指南

在今天的数字时代&#xff0c;金钱已不再局限于传统银行和实体店铺&#xff0c;而是转移到网上银行和电子商务平台上。而随着这一变化&#xff0c;网络犯罪也从现实世界的抢劫演变成了数字世界中的“数字扒窃”。这意味着&#xff0c;几乎每个商业实体&#xff0c;无论大小&…

RV1126+FFMPEG推流项目(6)视频码率及其码率控制方式

视频从采集到编码再到线程获取编码后的数据&#xff0c;已经全部说完。接下来继续来说应该比较重要的&#xff0c;和视频相关的。就是码率。 视频码率及其码率控制方式 一、什么是码率&#xff1f; 视频码率是指在单位时间内传输的视频数据量&#xff0c;通常以 kbps&#x…

python管理工具:conda部署+使用

python管理工具&#xff1a;conda部署使用 一、安装部署 1、 下载 - 官网下载&#xff1a; https://repo.anaconda.com/archive/index.html - wget方式&#xff1a; wget -c https://repo.anaconda.com/archive/Anaconda3-2023.03-1-Linux-x86_64.sh2、 安装 在conda文件的…

深入理解 D3.js 力导向图:原理、调参与应用

目录 前言1. D3.js 力导向图的核心原理1.1 物理模拟与数值积分器1.2 力导向图的物理模型 2. D3.js 力导向图的主要调参项2.1 向心力&#xff08;d3.forceCenter&#xff09;2.2 碰撞检测&#xff08;d3.forceCollide&#xff09;2.3 弹簧力&#xff08;d3.forceLink&#xff09…

redis实现限流

令牌桶逻辑 计算逻辑&#xff1a; 代码&#xff1a; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool;/*** ClassName RedisRateLimiterTokenBucket* Description TODO* Author zhang zhengdong* DATE 2025/1/17 20:22* Version 1.0*/ public class…

Golang Gin系列-2:搭建Gin 框架环境

开始网络开发之旅通常是从选择合适的工具开始的。在这个全面的指南中&#xff0c;我们将引导你完成安装Go编程语言和Gin框架的过程&#xff0c;Gin框架是Go的轻量级和灵活的web框架。从设置Go工作空间到将Gin整合到项目中&#xff0c;本指南是高效而强大的web开发路线图。 安装…

Maven在Win10上的安装教程

诸神缄默不语-个人CSDN博文目录 这个文件可以跟我要&#xff0c;也可以从官网下载&#xff1a; 第一步&#xff1a;解压文件 第二步&#xff1a;设置环境变量 在系统变量处点击新建&#xff0c;输入变量名MAVEN_HOME&#xff0c;变量值为解压路径&#xff1a; 在系统变…

51c大模型~合集106

我自己的原文哦~ https://blog.51cto.com/whaosoft/13115290 #GPT-5、 Opus 3.5为何迟迟不发 新猜想&#xff1a;已诞生&#xff0c;被蒸馏成小模型来卖 「从现在开始&#xff0c;基础模型可能在后台运行&#xff0c;让其他模型能够完成它们自己无法完成的壮举——就像一个老…

SpringBoot+Vue小区智享物业管理系统(高质量源码,可定制,提供文档,免费部署到本地)

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

Json转换类型报错问题:java.lang.Integer cannot be cast to java.math.BigDecimal

Json转换类型报错问题&#xff1a;java.lang.Integer cannot be cast to java.math.BigDecimal 小坑规避指南 小坑规避指南 项目中遇到json格式转换成Map&#xff0c;已经定义了Map的key和value的类型&#xff0c;但是在遍历Map取值的时候出现了类型转换的报错问题&#xff08…

在Playwright中使用PO模式

1.新建项目 安装库 npm init -y npm install -D playwright npm install -D playwright/test npm install typescript ts-node types/node npx playwright install 项目目录 2.编写代码 package.json {"name": "pom_playwright","version": …

Web渗透测试之伪协议与SSRF服务器请求伪装结合? 能产生更多的效果

目录 ssrf漏洞利用{危害} 伪协议介绍 Gopher协议简介 SSRF攻击中常用协议 file协议 file协议数据格式&#xff1a; dict协议 dict协议数据格式&#xff1a; Gopher攻击Redis redis的协议数据流格式&#xff1a; 简单示例&#xff1a; 使用gopher协议写入定时任务 …

【论文阅读笔记】人工智能胃镜在盲区检测和自主采图中的应用

作者&#xff1a;李夏/吴练练/于红刚 小结 盲区检测的意思&#xff0c;实际上在算法的需求定义上&#xff0c;就是部位识别。   胃肠镜检查中&#xff0c;按照不同的规范&#xff0c;有不同应该观察到的地方。当医生知道哪些部位比较容易出病灶的情况下&#xff0c;就容易忽…

python之二维几何学习笔记

一、概要 资料来源《机械工程师Python编程&#xff1a;入门、实战与进阶》安琪儿索拉奥尔巴塞塔 2024年6月 点和向量&#xff1a;向量的缩放、范数、点乘、叉乘、旋转、平行、垂直、夹角直线和线段&#xff1a;线段中点、离线段最近的点、线段的交点、直线交点、线段的垂直平…

AI编程工具使用技巧——通义灵码

活动介绍通义灵码1. 理解通义灵码的基本概念示例代码生成 2. 使用明确的描述示例代码生成 3. 巧妙使用注释示例代码生成 4. 注意迭代与反馈原始代码反馈后生成优化代码 5. 结合生成的代码进行调试示例测试代码 其他功能定期优化生成的代码合作与分享结合其他工具 总结 活动介绍…

国产编辑器EverEdit - 复制为RTF

1 复制为RTF 1.1 应用背景 在写产品手册或者其他文档时&#xff0c;可能会用到要将产品代码以样例的形式放到文档中&#xff0c;一般的文本编辑器拷贝粘贴到Word中也就是普通文本&#xff0c;没有语法着色&#xff0c;这样感观上不是太好&#xff0c;为了让读者的感观更好一点…

Python毕业设计选题:基于python的酒店推荐系统_django+hadoop

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 酒店客房管理 客房类型管理 客房预定管理 用户…

YoloV10改进策略:Neck层改进|EFC,北理提出的适用小目标的特征融合模块|即插即用

论文信息 论文题目:A Lightweight Fusion Strategy With Enhanced Interlayer Feature Correlation for Small Object Detection 论文链接:https://ieeexplore.ieee.org/abstract/document/10671587 官方github:https://github.com/nuliweixiao/EFC 研究贡献 为了解决上…