vue時(shí)間線組件的使用方法
更新時(shí)間：2021年08月11日 11:39:58 作者：阿晏_
這篇文章主要為大家詳細(xì)介紹了vue時(shí)間線組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue時(shí)間線組件的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
效果
vue-時(shí)間線組件（時(shí)間軸組件）代碼
<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;
}
/* 時(shí)間線 */
.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()返回的對(duì)象里聲明數(shù)組 dongtai:[]
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue多布局模式實(shí)現(xiàn)方法詳細(xì)講解
這篇文章主要介紹了Vue多布局模式實(shí)現(xiàn)方法，多布局模式可以根據(jù)用戶角色所在場(chǎng)景切換頁面布局，是非常常見的基礎(chǔ)功能，感興趣的同學(xué)可以參考下文2023-05-05
詳解vue中$nextTick和$forceUpdate的用法
這篇文章主要介紹了詳解vue中$nextTick和$forceUpdate的用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了Vue事件總線的使用問題及解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要給大家介紹了關(guān)于Uniapp設(shè)置頁面的背景圖片,uni-app中設(shè)置背景圖有兩種方式,分別是全局設(shè)置和在相應(yīng)的view內(nèi)設(shè)置背景,文中給出了代碼示例,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了基于vue.js的分頁插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue修改滾動(dòng)條樣式,首先要知道，修改滾動(dòng)條樣式，利用偽元素-webkit-scrollbar。下面來看看文章內(nèi)容的具體實(shí)現(xiàn)吧2021-11-11
electron實(shí)現(xiàn)打印功能支持靜默打印、無感打印
使用electron開發(fā)應(yīng)用遇到了打印小票的功能,實(shí)現(xiàn)途中還是幾經(jīng)波折,下面這篇文章主要給大家介紹了關(guān)于electron實(shí)現(xiàn)打印功能支持靜默打印、無感打印的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章給大家介紹了vue封裝公共方法的實(shí)現(xiàn),文章中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue?Hook?封裝通用型表格,設(shè)計(jì)通用型表格組件首先,需要設(shè)計(jì)一個(gè)基礎(chǔ)的表格組件,它接受列配置、數(shù)據(jù)和分頁信息等參數(shù),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
vue動(dòng)態(tài)渲染svg、添加點(diǎn)擊事件的實(shí)現(xiàn)
這篇文章主要介紹了vue動(dòng)態(tài)渲染svg、添加點(diǎn)擊事件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03