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="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-item
          class="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} = Vue
  const 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=newvalue
      return {//返回的是一个: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/[email protected]/dist/index.css">

<script src='https://unpkg.com/[email protected]/dist/index.full.js'></script>

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

UNPKG - element-ui

参考:

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

相关推荐
小小小小宇12 分钟前
前端小tips
前端
小小小小宇21 分钟前
二维数组按顺时针螺旋顺序
前端
安木夕39 分钟前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net
努力敲代码呀~42 分钟前
前端高频面试题2:浏览器/计算机网络
前端·计算机网络·html
高山我梦口香糖1 小时前
[electron]预脚本不显示内联script
前端·javascript·electron
神探小白牙1 小时前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频
Angel_girl3192 小时前
vue项目使用svg图标
前端·vue.js
難釋懷2 小时前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo2 小时前
Ajax入门
前端·ajax·okhttp
爱生活的苏苏2 小时前
vue生成二维码图片+文字说明
前端·vue.js