您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)vue時間線組件怎么用,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
具體內(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>
應(yīng)用
// 父組件引用 <timeline :timeline-list="dongtai"></timeline>
// 引入組件,記得組件路徑要根據(jù)自己的來 import Timeline from "./Timeline"; // 在data()返回的對象里聲明數(shù)組 dongtai:[]
關(guān)于“vue時間線組件怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。