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

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

news 2026/4/30 20:18:32

直接上效果图

案例源码 

<!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

新版mmdetection3d将3D bbox绘制到图像

环境信息 使用 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

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

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

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

02_使用API_String

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

编程日记 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&#xff1f; IOC(Inversion of Control&#xff1a;控制反转)是面向对象编程中的一种设计原则。其中最常见的方式叫做依赖注入&#xff08;…...

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

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

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

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

链表OJ--上

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

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

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

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

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

推荐一款适合做智慧旅游的前端模板

目录 前言 一、功能介绍 二、前端技术介绍 三、功能及界面设计介绍 1、数据概览 2、车辆监控 3、地图界面 4、其它功能 四、扩展说明 总结 前言 智慧旅游是一种全新的旅游业务模式&#xff0c;它充分利用先进的信息技术&#xff0c;提升旅游体验&#xff0c;优化旅游管…...

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

VL06O报表添加增强字段

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

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

SpringBoot Admin

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

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

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

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

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

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

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

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

如何用CHAT解释文章含义？

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

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

创作4周年

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言机…...

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

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

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

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

Apahce虚拟主机配置演示

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

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

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

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

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

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

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

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

二维码修复神器QrazyBox：拯救损坏二维码的终极指南

二维码修复神器QrazyBox&#xff1a;拯救损坏二维码的终极指南 【免费下载链接】qrazybox QR Code Analysis and Recovery Toolkit 项目地址: https://gitcode.com/gh_mirrors/qr/qrazybox 核心关键词&#xff1a;二维码修复工具、QR码恢复软件、损坏二维码解码、在线二…...

编程新知 2026/4/30 19:52:10

4种方法快速获取分子对接盒子：PyMOL插件终极指南

4种方法快速获取分子对接盒子&#xff1a;PyMOL插件终极指南 【免费下载链接】GetBox-PyMOL-Plugin A PyMOL Plugin for calculating docking box for LeDock, AutoDock and AutoDock Vina. 项目地址: https://gitcode.com/gh_mirrors/ge/GetBox-PyMOL-Plugin 分子对接盒…...

编程新知 2026/4/30 19:34:22

Ubuntu 20.04/22.04 更换阿里云、清华源后，安装软件依然报错？可能是你漏了这关键一步

Ubuntu 20.04/22.04 换源后安装报错&#xff1f;你可能忽略了这些关键细节 最近在帮团队调试几台新部署的Ubuntu服务器时&#xff0c;遇到了一个看似简单却困扰了不少人的问题&#xff1a;明明已经将软件源更换为阿里云或清华镜像站&#xff0c;执行apt install时却依然报错&q…...

编程新知 2026/4/30 18:42:51

WarcraftHelper：魔兽争霸3性能优化与兼容性修复完全指南

WarcraftHelper&#xff1a;魔兽争霸3性能优化与兼容性修复完全指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为《魔兽争霸3》这款经典RTS游…...

编程新知 2026/4/30 17:49:39

如何一键获取全国高铁数据？Parse12306开源工具终极指南

如何一键获取全国高铁数据&#xff1f;Parse12306开源工具终极指南 【免费下载链接】Parse12306 分析12306 获取全国列车数据 项目地址: https://gitcode.com/gh_mirrors/pa/Parse12306 你是否曾为获取全国高铁时刻表数据而烦恼&#xff1f;当你需要开发铁路查询应用或进…...

编程新知 2026/4/30 17:43:22

揭秘低查重AI教材编写方法，借助工具轻松搞定教材创作

许多教材创作者常常感到遗憾&#xff1a;即使经过细致打磨的教材内容&#xff0c;因缺少必要的配套资源&#xff0c;整体的教学效果仍然受限。课后的练习题需要有梯度的设计&#xff0c;但往往缺乏新颖的创意&#xff1b;教学课件希望能更加直观&#xff0c;却因缺乏技术能力难…...

编程新知 2026/4/30 16:38:48

Applera1n：iOS设备离线激活锁绕过终极解决方案

Applera1n&#xff1a;iOS设备离线激活锁绕过终极解决方案 【免费下载链接】applera1n icloud bypass for ios 15-16 项目地址: https://gitcode.com/gh_mirrors/ap/applera1n 在iOS设备管理领域&#xff0c;激活锁绕过一直是技术专家和开发者关注的核心难题。Applera1n…...

编程新知 2026/4/30 16:09:12

Atmosphere大气层：为Nintendo Switch打造的开源定制固件深度解析

Atmosphere大气层&#xff1a;为Nintendo Switch打造的开源定制固件深度解析 【免费下载链接】Atmosphere-stable 大气层整合包系统稳定版 项目地址: https://gitcode.com/gh_mirrors/at/Atmosphere-stable 当你的Switch被官方系统限制得喘不过气时&#xff0c;Atmosphe…...

编程新知 2026/4/30 15:46:50

3步搞定！Windows 11更新后TranslucentTB启动失败的终极修复指南

3步搞定&#xff01;Windows 11更新后TranslucentTB启动失败的终极修复指南 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 你是不是也遇…...

编程新知 2026/4/30 15:03:59

告别卡顿！用Unreal 5的Niagara和顶点动画，轻松渲染上万“小兵”

突破性能极限&#xff1a;Unreal 5 Niagara与顶点动画实现万人同屏实战指南 当屏幕上同时出现数百个角色时&#xff0c;帧率骤降是每个UE5开发者都经历过的噩梦。骨骼动画的计算开销、移动组件的性能消耗、DrawCall的堆积&#xff0c;这些问题在大规模群体渲染时会被无限放大。…...

编程新知 2026/4/30 13:41:42