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