竖向时间轴组件，高度自适应

最新推荐文章于 2024-04-12 16:06:27 发布

童话镇里没童话

最新推荐文章于 2024-04-12 16:06:27 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/qq_24790575/article/details/109200900

版权

本文介绍如何使用Vue.js创建一个高度自适应的竖向时间轴组件，包括单侧和双侧布局，适应不同场景需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单侧竖向时间轴，高度自适应

<template>
    <div class="eltimeline">
        <div class="time-line-only">
            <div v-for="(item,index) in data" :key="index" class="time-line-only-div">
                <p class="p6"></p>
                <p class="p7"  v-if="index+1 !=data.length"></p>
                <p class="p8">
                    <span class="spanl">
                        {
  {item.time}}&nbsp;&nbsp;&nbsp;&nbsp;{
  {item.desc}}
                    </span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            data:[]
        }
    },
}
</script>
<style lang='less' scoped>
    .eltimeline{