vue時間線組件的使用方法
更新時間:2021年08月11日 11:39:58 作者:阿晏_
這篇文章主要為大家詳細介紹了vue時間線組件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue時間線組件的具體實現(xiàn)代碼,供大家參考,具體內(nèi)容如下
效果
vue-時間線組件(時間軸組件)代碼
<template> <ul class="timeline-wrapper"> <li class="timeline-item" v-for="t in timelineList" :key="t.id"> <div class="timeline-box"> <div class="out-circle"> <div class="in-circle"></div> </div> <div class="long-line"></div> </div> <div class="timeline-content"> <div class="timeline-date">{{t.date}}</div> <div class="timeline-title">{{ t.title}}</div> <div class="timeline-desc">{{ t.content}}</div> </div> </li> </ul> </template> <script type="text/babel"> import Vue from 'vue' export default Vue.component('Timeline',{ name: "Timeline", props: { timelineList: { type: Array, default: () => { return [] } } } }) </script> <style scoped lang="scss"> ul.timeline-wrapper { list-style: none; margin: 0; padding: 0; } /* 時間線 */ .timeline-item { position: relative; .timeline-box { text-align: center; position: absolute; .out-circle { width: 16px; height: 16px; background: rgba(14, 116, 218, 0.1); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1); /*opacity: 0.1;*/ border-radius: 50%; display: flex; align-items: center; .in-circle { width: 8px; height: 8px; margin: 0 auto; background: rgba(14, 116, 218, 1); border-radius: 50%; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1); } } .long-line { width: 2px; height: 98px; background: rgba(14, 116, 218, 1); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1); opacity: 0.1; margin-left: 8px; } } .timeline-content { box-sizing: border-box; margin-left: 20px; height: 106px; padding: 0 0 0 20px; text-align: left; margin-bottom: 30px; .timeline-title { font-size: 14px; word-break: break-all; margin-bottom: 16px; color: #333; font-weight: 500; /*display: inline;*/ } .timeline-date { font-size: 16px; color: #333; font-weight: 500; margin-bottom: 16px; } .timeline-desc { font-size: 14px; color: #999999; } } } .timeline-item:last-of-type .timeline-content { margin-bottom: 0; } </style>
應用
// 父組件引用 <timeline :timeline-list="dongtai"></timeline>
// 引入組件,記得組件路徑要根據(jù)自己的來 import Timeline from "./Timeline"; // 在data()返回的對象里聲明數(shù)組 dongtai:[]
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
如何用vue-pdf包實現(xiàn)pdf文件預覽,支持分頁
這篇文章主要介紹了如何用vue-pdf包實現(xiàn)pdf文件預覽,支持分頁問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決
本文主要介紹了ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別說明
這篇文章主要介紹了Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue3實現(xiàn)刷新頁面局部內(nèi)容的示例代碼
本文主要介紹了Vue3實現(xiàn)刷新頁面局部內(nèi)容的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-07-07