当前位置：首页 > news >正文

html页面直接使用elementui Plus时间线 + vue3

news 2026/2/14 12:23:50

直接上效果图

案例源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../js/vue3.3.8/vue.global.js"></script><link rel="stylesheet" href="../js/elementPlus/index.css"><script src="../js/elementPlus/index.full.js"></script><script src="../js/elementPlus/icons-vue.js"></script>
</head>
<style>.processBox {background-color: #fff;height: 210px;}.timeline {display: flex;flex-direction: row;width: 95%;margin: auto 80px;}.lineitem {transform: translateX(50%);width: 25%;}.title {font-size: 16px;font-weight: 600;padding-left:32px;padding-top: 16px;}.el-timeline-item__tail {border-left: none;border-top: 2px solid #e4e7ed;width: 100%;position: absolute;top: 6px;}.el-timeline-item__wrapper {padding-left: 0;position: absolute;top: 20px;transform: translateX(-50%);text-align: center;}.active .el-timeline-item__node  {background-color: #409eff;}.active .el-timeline-item__tail {border-top: 2px solid #409eff !important;}</style>
<body>
<div id="app"><div class="processBox"><div class="title">工程进度</div>
<el-divider></el-divider><div class="timelineProcessBox"><el-timeline class="timeline"><el-timeline-itemclass="lineitem":class="activity.done ? 'active' : 'inactive'"v-for="(activity, index) in activities":key="index":timestamp="activity.time"><span style="display: flex; flex-direction: column"><span style="margin: 10px 0; font-size: 16px">{{ activity.content }}</span><span style="color: #8c8c8c; font-size: 14px">{{ activity.people }}</span></span></el-timeline-item></el-timeline></div></div>
</div>
<script>const {createApp, ref, reactive, computed} = Vueconst app = createApp({ //createApp：vue的工厂函数，不是vue2 的构造函数setup() {const activities = ref([{content: '立项阶段',time: '2018-04-12 20:46',people: '小王也',done: true,},{content: '需求-开发阶段',people: '狐灵国王',done: false,time: '2018-04-03 20:46',},{content: '验收阶段',done: false,people: '熊大',time: '2018-04-03 20:46',},{content: '结算阶段',people: '',done: false,time: '',}])const message = ref('Hello vue!') //创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。赋值：message.value=newvaluereturn {//返回的是一个：promise，  一个对象，一个字段，等于vue2:data:{return{}}message,activities}},})app.use(ElementPlus)app.mount('#app')
</script>
</body>
</html>

vue3, element plus下载

<link rel="stylesheet" href="https://unpkg.com/browse/element-plus@2.4.2/dist/index.css">

<script src='https://unpkg.com/element-plus@2.4.2/dist/index.full.js'></script>

//element plus的字体库可以在element ui发布下下载

UNPKG - element-ui

参考：

Jquery 老项目引入vue,elementui-CSDN博客

html页面直接使用elementui Plus时间线 + vue3

直接上效果图案例源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"../js/vue3.3.8/vue.global.js"></script><link rel"styles…...

编程日记 2023/11/23 11:27:24

信息压缩模型在自然语言处理中的应用和探讨

信息压缩模型在自然语言处理中的应用和探讨摘要:正文:结论:附录：摘要: 随着人工智能和深度学习的发展，自然语言处理(NLP)在信息处理中的角色变得越来越重要。然而，海量的自然语言数据为信息处理带来了挑战——更多的信息通常意味着更高的处理成本，并可能导致效率降低。为…...

编程日记 2023/11/23 11:24:21

环境信息使用 python mmdet3d/utils/collect_env.py收集环境信息 sys.platform: linux Python: 3.7.12 | packaged by conda-forge | (default, Oct 26 2021, 06:08:21) [GCC 9.4.0] CUDA available: True numpy_random_seed: 2147483648 GPU 0,1: NVIDIA GeForce RTX 3090 …...

编程日记 2023/11/23 11:23:21

合伙人注册即得/创业平台扶持！

问心一语持续体验中~ 与公司签订线下（线上）纸质合伙人代理合同，具备法律效力。一级直推、非一级直推注册即得奖励。(消耗完毕被邀请用户赠送的AI免费使用条数) 即：邀请1人注册即得并消耗！只需注册无需充值&#xff…...

编程日记 2023/11/23 11:21:17

02_使用API_String

StringBuilder StringBuilder 代表可变字符串对象，相对于是一个容器，它里面装的字符串是可以改变的，就是用来操作字符串的好处：StringBuilder 比 String 更适合做字符串的修改操作，效率会更高，代码也会更简…...

编程日记 2023/11/23 11:20:15

Spring IOC/DI和MVC及若依对应介绍

文章目录一、Spring IOC、DI注解1.介绍2.使用二、Spring MVC注解1.介绍2.使用一、Spring IOC、DI注解 1.介绍什么是Spring IOC/DI？ IOC(Inversion of Control：控制反转)是面向对象编程中的一种设计原则。其中最常见的方式叫做依赖注入（…...

编程日记 2023/11/23 11:19:13

python的多层嵌套循环时，break可以退出多层循环吗？

在Python中，break 语句只能退出当前所在的循环，无法直接退出多层嵌套的循环。但是，你可以通过使用一个标志变量或者通过使用异常来模拟退出多层循环的效果。使用标志变量： flag False for i in range(5):for j in range(5):if…...

编程日记 2023/11/23 11:18:13

链表OJ--上

文章目录前言一、反转链表二、移除链表元素三、链表中倒数第K个结点四、相交链表五、链表的中间结点前言一、反转链表力扣206：反转链表- - -点击此处传送思路图： 方法一：改变指向方法二： 代码： //方法一 /…...

编程日记 2023/11/23 11:17:12

内衣洗衣机哪些品牌质量好实惠？小型洗衣机全自动

现在洗内衣内裤也是一件较麻烦的事情了，在清洗过程中还要用热水杀菌，还要确保洗衣液是否有冲洗干净，还要防止细菌的滋生等等，所以入手一款小型的烘洗全套的内衣洗衣机是非常有必要的，专门的内衣洗衣机可以最大程度减少…...

编程日记 2023/11/23 11:16:11

VL06O报表添加增强字段

业务描述用户需要在VL06O事务代码下进行批量交货过账，现有的筛选条件不太适用当前公司的业务，需要在报表中新增三个交货单增强字段，方便其筛选（选择屏幕没有加，用户在报表里用标准按钮功能自己筛选） 效果…...

编程日记 2023/11/23 11:14:09

SpringBoot Admin

前言 Spring Boot Admin 是一个管理和监控 Spring Boot 应用程序的开源项目，它提供了一个简洁的 Web 界面来监控 Spring Boot 应用程序的状态和各种运行时指标。Spring Boot Admin 可以帮助开发者快速了解应用程序的状态，并快速定位错误或性能问题。下面…...

编程日记 2023/11/23 11:13:08

Java基础-----正则表达式

文章目录 1.简介2.目的3.学习网站4.常用匹配字符5.String类中用到正则表达式的方法 1.简介又叫做规则表达式。是一种文本模式，包括普通字符和特殊字符（元字符）。正则使用单个字符来描述、匹配一系列某个句法规则的字符串，通常用…...

编程日记 2023/11/23 11:12:07

基于 Eureka 的 Ribbon 负载均衡实现原理【SpringCloud 源码分析】

目录一、前言二、源码分析三、负载均衡策略一、前言如下图，我们在 orderserver 中通过 restTemplate 向 usersever 发起 http 请求，在服务拉取的时候，主机名 localhost 是用服务名 userserver 代替的，那么该 url 是一个可…...

编程日记 2023/11/23 11:11:05

如何用CHAT解释文章含义？

问CHAT：解释“ 本身乐善好施，令名远近共钦，待等二十左右，定有高亲可攀；而且四德俱备，帮夫之缘亦有。主持家事不紊，上下亦无闲言。但四十交进，家内谨防口舌，须安家堂&…...

编程日记 2023/11/23 11:10:02

创作4周年

🙌秋名山码民的主页 😂oi退役选手，Java、大数据、单片机、IoT均有所涉猎，热爱技术，技术无罪 🎉欢迎关注🔎点赞👍收藏⭐️留言📝 获取源码，添加WX 目录前言机…...

编程日记 2023/11/23 11:09:01

《opencv实用探索·一》QT+opencv实现图片拼接和Mat转QImage

本文利用opencv实现了几个好用的功能，包含两个文件，如下： 源码放在文章末尾 imageProcessing类包含三个功能： 1、图像拼接 cv::Mat imageMosaic(cv::Mat mat1, cv::Mat mat2, MosaicMode mosaicMode);mat1和mat2为两个待拼接的…...

编程日记 2023/11/23 11:08:00

Apahce虚拟主机配置演示

在企业的真实环境中，一台WEB服务器发布单个网站会非常浪费资源，所以一台WEB服务器一般都会发布多个网站，少则3-5个，多个10-20个网站。在一台服务器上发布多网站，也称之为部署多个虚拟主机。 WEB虚拟机主机配置方法主要…...

编程日记 2023/11/23 11:06:59

加班做报表被嘲低效！快用大数据分析工具

做数据分析报表很耗时间，因为不仅要解决多业务系统数据质量标准不一问题，还需要进行大量的公式计算、报表设计与制作。但那是以前，在大数据分析工具强势崛起的当下，这些工作都能交给大数据分析工具来做了。以前是花90%的时间做报表…...

编程日记 2023/11/23 11:05:58

详解——菱形继承及菱形虚拟继承

目录一，菱形继承 1.1单继承 1.2多继承 1.3菱形继承 1.4菱形继承的问题 1.5虚拟继承解决数据冗余和二义性的原理二.继承的总结和反思一，菱形继承 C三大特性——继承-CSDN博客 1.1单继承单继承：一个子类只有一个直接父类时称这个继…...

编程日记 2023/11/23 11:04:57

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

遍历 Map 类型集合的方法汇总

1 方法一先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

在rocky linux 9.5上在线安装 docker

前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12