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

    直接上效果图

    案例源码 

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <script src="../js/vue3.3.8/vue.global.js"></script>
    7.   <link rel="stylesheet" href="../js/elementPlus/index.css">
    8.   <script src="../js/elementPlus/index.full.js"></script>
    9.   <script src="../js/elementPlus/icons-vue.js"></script>
    10. </head>
    11. <style>
    12.   .processBox {
    13.     background-color: #fff;
    14.     height: 210px;
    15.   }
    16.  
    17.   .timeline {
    18.     display: flex;
    19.     flex-direction: row;
    20.     width: 95%;
    21.     margin: auto 80px;
    22.   }
    23.  
    24.   .lineitem {
    25.     transform: translateX(50%);
    26.     width: 25%;
    27.   }
    28.  
    29.   .title {
    30.     font-size: 16px;
    31.     font-weight: 600;
    32.     padding-left:32px;
    33.     padding-top: 16px;
    34.   }
    35.  
    36.   .el-timeline-item__tail {
    37.     border-left: none;
    38.     border-top: 2px solid #e4e7ed;
    39.     width: 100%;
    40.     position: absolute;
    41.     top: 6px;
    42.   }
    43.  
    44.   .el-timeline-item__wrapper {
    45.     padding-left: 0;
    46.     position: absolute;
    47.     top: 20px;
    48.     transform: translateX(-50%);
    49.     text-align: center;
    50.   }
    51.   .active .el-timeline-item__node  {
    52.    background-color: #409eff;
    53.   }
    54.  
    55.   .active .el-timeline-item__tail {
    56.     border-top: 2px solid #409eff !important;
    57.   }
    58.  
    59. </style>
    60. <body>
    61. <div id="app">
    62.   <div class="processBox">
    63.     <div class="title">工程进度</div>
    64. <el-divider></el-divider>
    65.     <div class="timelineProcessBox">
    66.       <el-timeline class="timeline">
    67.         <el-timeline-item
    68.           class="lineitem"
    69.           :class="activity.done ? 'active' : 'inactive'"
    70.           v-for="(activity, index) in activities"
    71.           :key="index"
    72.           :timestamp="activity.time"
    73.         >
    74.           <span style="display: flex; flex-direction: column">
    75.             <span style="margin: 10px 0; font-size: 16px">
    76.               {{ activity.content }}
    77.             </span>
    78.             <span style="color: #8c8c8c; font-size: 14px">
    79.               {{ activity.people }}
    80.             </span>
    81.           </span>
    82.         </el-timeline-item>
    83.       </el-timeline>
    84.     </div>
    85.   </div>
    86. </div>
    87. <script>
    88.  
    89.   const {createApp, ref, reactive, computed} = Vue
    90.   const app = createApp({ //createApp：vue的工厂函数，不是vue2 的构造函数
    91.     setup() {
    92.       const activities = ref([
    93.         {
    94.           content: '立项阶段',
    95.           time: '2018-04-12 20:46',
    96.           people: '小王也',
    97.           done: true,
    98.         },
    99.         {
    100.           content: '需求-开发阶段',
    101.           people: '狐灵国王',
    102.           done: false,
    103.           time: '2018-04-03 20:46',
    104.         },
    105.         {
    106.           content: '验收阶段',
    107.           done: false,
    108.           people: '熊大',
    109.           time: '2018-04-03 20:46',
    110.         },
    111.         {
    112.           content: '结算阶段',
    113.           people: '',
    114.           done: false,
    115.           time: '',
    116.         }
    117.       ])
    118.       const message = ref('Hello vue!') //创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。赋值：message.value=newvalue
    119.       return {//返回的是一个：promise，  一个对象，一个字段，等于vue2:data:{return{}}
    120.         message,
    121.         activities
    122.       }
    123.     },
    124.   })
    125.   app.use(ElementPlus)
    126.   app.mount('#app')
    127. </script>
    128. </body>
    129. </html>

     vue3, element plus下载

     

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

    UNPKG - element-ui

    参考：

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

  • 相关阅读:
    【CSS常见的选择器】介绍
    【Java 进阶篇】JSP EL 详解
    GPT-4o：引领人工智能新时代的强大引擎
    蓝桥杯官网填空题（矩形切割）
    【毕业季】聊聊我的四年前端职业生涯
    【nlohmann/json】树节点的序列化和反序列化
    计算机网络---TCP
    Java“牵手”京东商品详情数据，京东商品详情API接口，京东API接口申请指南
    Java-矩阵(自动导航-越过障碍)
    360°全景环视「升级战」激化，前装供应链洗牌加速进行
  • 原文地址：https://blog.csdn.net/LlanyW/article/details/134526661