vue时间线组件怎么用

这篇文章将为大家详细讲解有关vue时间线组件怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体内容如下

效果

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);                                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;                            }            .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>

// 引入组件，记得组件路径要根据自己的来import Timeline from "./Timeline";// 在data()返回的对象里声明数组dongtai:[]

关于“vue时间线组件怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。