Vue實現(xiàn)時間軸效果

更新時間：2022年03月03日 11:05:37 作者：theMuseCatcher

這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)時間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)時間軸效果的具體代碼，供大家參考，具體內(nèi)容如下

時間軸上的時間點數(shù)和描述文本均可自定義設(shè)置

效果圖如下：

①創(chuàng)建時間軸組件Timeline.vue：

<template>
? <div class="m-timeline-area">
? ? <div class="m-timeline">
? ? ? <div
? ? ? ? :class="['m-timeline-item', {'last': n === totalDots}]"
? ? ? ? v-for="n in totalDots"
? ? ? ? :key="n">
? ? ? ? <div class="u-tail"></div>
? ? ? ? <div class="u-dot"></div>
? ? ? ? <div class="u-content">
? ? ? ? ? <p>{{ timelineDesc[n-1] }}</p>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? name: 'Timeline',
? props: {
? ? timelineDesc: {
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return []
? ? ? }
? ? },
? ? totalDots: {
? ? ? type: Number,
? ? ? default: 3
? ? }
? }
}
</script>
<style lang="less" scoped>
@blue: #1890ff;
@green: #52c41a;
@red: #f5222d;
@gray: rgba(0,0,0,.25);
.m-timeline-area {
? width: 360px;
? margin: 30px auto;
? .m-timeline {
? ? .m-timeline-item {
? ? ? position: relative;
? ? ? padding-bottom: 30px;
? ? ? .u-tail {
? ? ? ? position: absolute;
? ? ? ? top: 10px;
? ? ? ? left: 5px;
? ? ? ? height: calc(100% - 10px);
? ? ? ? border-left: 2px solid #e8e8e8; // 實線
? ? ? ? // border-left: 2px dotted #e8e8e8; // 點線
? ? ? ? // border-left: 2px dashed #e8e8e8; // 虛線
? ? ? }
? ? ? .u-dot {
? ? ? ? position: absolute;
? ? ? ? width: 8px;
? ? ? ? height: 8px;
? ? ? ? border: 2px solid @blue;
? ? ? ? border-radius: 50%;
? ? ? }
? ? ? .u-content {
? ? ? ? position: relative;
? ? ? ? top: -6px;
? ? ? ? margin-left: 25px;
? ? ? ? word-break: break-word;
? ? ? ? line-height: 24px;
? ? ? }
? ? }
? ? .last {
? ? ? .u-tail {
? ? ? ? display: none;
? ? ? }
? ? }
? }
}
</style>

②在要使用的頁面引入：

<Timeline :totalDots="5" :timelineDesc="timelineDesc" />
import Timeline from '@/components/Timeline'
components: {
? ? Timeline
}
timelineDesc: ['Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.', 'Create a services site', 'Create a services site', 'Create a services site', 'Create a services site']

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: