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

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

news 2025/8/12 8:02:33

直接上效果图

案例源码

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