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博客

相关推荐
前端大白话9 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys11 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话13 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
cg501723 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬25 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200435 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼36 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_092740 分钟前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸42 分钟前
一文带你使用Vue完成移动端(apk)项目
前端
会飞的鱼先生1 小时前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue