如何使用 Vue 实现时间轴？

随着社交网络等平台的普及，时间轴逐渐成为了人们分享生活经历的一种流行形式。时间轴可以按照时间顺序展示一系列事件或活动，帮助人们回顾过去，了解历史，同时也可以用作展示个人成长、旅行日记、团队项目进展等内容。

在网页开发中，想要实现时间轴的展示，则可以使用Vue框架，来快速搭建并实现效果。下面我们就来了解如何使用Vue实现时间轴。

一、页面布局

时间轴通常分为两种形式：纵向时间轴和横向时间轴。横向时间轴一般展示某种时间段内一系列事件的内容，而纵向时间轴则按照时间顺序展示事件，类似一个时间线。

本文以纵向时间轴为例，首先根据设计稿，我们需要撰写页面布局代码；

立即学习“前端免费学习笔记（深入）”；

<div class="timeline">
  <div class="timeline-header">
    <div class="timeline-header-line"></div>
  </div>
  <div class="timeline-container">
      <div class="timeline-item">
        <div class="timeline-item-time">2010年</div>
        <div class="timeline-item-content">content 1</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-time">2012年</div>
        <div class="timeline-item-content">content 2</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-time">2015年</div>
        <div class="timeline-item-content">content 3</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-time">2017年</div>
        <div class="timeline-item-content">content 4</div>
      </div>
  </div>
</div>

在这里为了让样式更好的展示，我采用了flex布局。

二、定义数据及渲染

接下来，需要在 Vue 实例中定义数据并将数据渲染进页面中。

Loki.Build

AI原生网站构建工具

下载

new Vue({
  el: '#app',
  data: {
    list: [
      {
        time: '2010年',
        content: 'content 1'
      },
      {
        time: '2012年',
        content: 'content 2'
      },
      {
        time: '2015年',
        content: 'content 3'
      },
      {
        time: '2017年',
        content: 'content 4'
      }
    ]
  }
})

然后使用v-for指令在页面上循环遍历数据，并使用{{}}绑定数据到页面中。

<div class="timeline-item" v-for="item in list">
  <div class="timeline-item-time">{{ item.time }}</div>
  <div class="timeline-item-content">{{ item.content }}</div>
</div>

三、实现动画效果

为了增加用户体验，我们可以为每个事件添加动画效果。将data中的list属性添加一个新属性isShow，用于标识是否显示当前事件内容。

data: {
  list: [
    {
      time: '2010年',
      content: 'content 1',
      isShow: false
    },
    {
      time: '2012年',
      content: 'content 2',
      isShow: false
    },
    {
      time: '2015年',
      content: 'content 3',
      isShow: false
    },
    {
      time: '2017年',
      content: 'content 4',
      isShow: false
    }
  ]
}

接下来，可以为每个事件添加点击事件，来控制当前事件内容展示和隐藏，这里我们需要用到Vue的事件处理器和class绑定。

<div class="timeline-item" v-for="(item, index) in list" :key="index">
  <div class="timeline-item-time" @click="item.isShow = !item.isShow">
    {{ item.time }}
  </div>
  <div class="timeline-item-content" :class="{show: item.isShow}">{{ item.content }}</div>
</div>

我们可以在class属性中添加判断，如果当前item.isShow为真则添加show类，否则不添加，从而实现事件内容的展示和隐藏。

.timeline-item-content {
  display:none;
  height: 0;
  transition:all .3s linear;
}
.show {
  display:block;
  height: auto;
}

通过上面的代码可以实现一个最基本的时间轴组件。

最后简单贴上完整的代码。

<div id="app">
  <div class="timeline">
    <div class="timeline-header">
      <div class="timeline-header-line"></div>
    </div>
    <div class="timeline-container">
      <div class="timeline-item" v-for="(item, index) in list" :key="index">
        <div class="timeline-item-time" @click="item.isShow = !item.isShow">
          {{ item.time }}
        </div>
        <div class="timeline-item-content" :class="{show: item.isShow}">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .timeline {
    position: relative;
    max-width: 1000px;
    margin: 30px auto;
  }

  .timeline-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #ccc;
    transform: translate(-50%, calc(50% - 15px));
  }

  .timeline-header-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50px;
    height: 30px;
    background: #ccc;
    transform: translateX(-50%);
    border-radius: 30px;
  }

  .timeline-container {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }

  .timeline-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    margin-bottom: 50px;
    padding: 0 50px;
    cursor: pointer;
  }

  .timeline-item:after {
    content: '';
    position: absolute;
    top: 12px;
    left: -15px;
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
  }

  .timeline-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #ccc;
  }

  .timeline-item:after,
  .timeline-item:before {
    z-index: 2;
  }

  .timeline-item-content {
    display: none;
    height: 0;
    transition: all .3s linear;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: 10px;
  }

  .timeline-item-time {
    width: 150px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: right;
    flex-shrink: 0;
    margin-right: 20px;
  }

  .show {
    display: block;
    height: auto;
  }
</style>

<script>
  new Vue({
    el: '#app',
    data: {
      list: [
        {
          time: '2010年',
          content: 'content 1',
          isShow: false
        },
        {
          time: '2012年',
          content: 'content 2',
          isShow: false
        },
        {
          time: '2015年',
          content: 'content 3',
          isShow: false
        },
        {
          time: '2017年',
          content: 'content 4',
          isShow: false
        }
      ]
    }
  })
</script>