Vue實現(xiàn)時間軸效果
更新時間：2022年03月03日 11:05:37 作者：theMuseCatcher
這篇文章主要為大家詳細介紹了Vue實現(xiàn)時間軸效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對比vue2帶來的性能提升有很多優(yōu)勢，總體來說Vue 3在性能、開發(fā)體驗和代碼組織方面都有所改進，使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā)，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)百度搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue中的provide / inject 有什么用處,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
vue 對axios get pust put delete封裝的實例代碼
在本篇文章里我們給各位整理的是一篇關(guān)于vue 對axios get pust put delete封裝的實例代碼內(nèi)容，有需要的朋友們可以參考下。2020-01-01
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問題，本文通過項目案例實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
這篇文章主要為大家詳細介紹了在vue項目中如何加載markdown,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
最近在做一個vue的項目,碰到一點關(guān)于Map鍵值對傳參的問題,下面這篇文章主要給大家介紹了關(guān)于Vue中如何使用Map鍵值對傳參的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動態(tài)綁定問題
今天小編就為大家分享一篇關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動態(tài)綁定問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue 實現(xiàn)可拖曳的樹狀結(jié)構(gòu)圖
這篇文章主要介紹了vue 實現(xiàn)可拖曳的樹狀結(jié)構(gòu)圖，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了vue項目API接口get請求傳遞參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07