Vue实现时间轴效果

下面是“Vue实现时间轴效果”的完整攻略。

简介

时间轴是一种用于展示时间进程的方式，通常由一条水平线和上面分布的时间事件点组成。在网站设计中，时间轴常用于展示历史时间线、流程进程等内容。本次攻略将介绍如何使用Vue来实现基础的时间轴效果。

示例代码

首先我们来看一个简单的示例代码，它展示了一个简单的时间轴效果。

<template>
  <div class="timeline">
    <div class="line"></div>
    <ul>
      <li v-for="(item, index) in items" :key="index" :class="index%2?'right':''">
        <div class="point"></div>
        <div class="content">
          <div class="time">{{ item.time }}</div>
          <div class="text">{{ item.text }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style>
.timeline {
  position: relative;
  padding: 20px 0;
}

.line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #666;
  transform: translateX(-50%);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.5;
}

li.right .content {
  text-align: right;
}

.point {
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #666;
}

.time {
  margin-bottom: 5px;
  color: #999;
}

.text {
  margin-left: 10px;
}
</style>

<script>
export default {
  data() {
    return {
      items: [
        {
          time: '2022-01-01',
          text: '事件1'
        },
        {
          time: '2022-02-01',
          text: '事件2'
        },
        {
          time: '2022-03-01',
          text: '事件3'
        }
      ]
    }
  }
}
</script>

其中，我们使用了一个普通的<ul>列表来展示时间轴上的事件点，每个事件卡片由一个带有样式的<li>元素构成。.point用来展示事件点的小圆点，.content包含了事件的时间和文本信息。通过设置不同的.right样式来使事件卡片从左到右排列或者从右到左排列。

点击事件

在常见的实际应用中，用户可能需要对时间轴上的事件卡片进行点击操作，比如查看事件详情等。下面我们来看一个示例代码，它实现了对时间轴上的事件卡片进行点击时，弹出该事件的详细信息。

<template>
  <div class="timeline">
    <div class="line"></div>
    <ul>
      <li v-for="(item, index) in items" :key="index" :class="index%2?'right':''">
        <div class="point" @click="showDetail(item)"></div>
        <div class="content">
          <div class="time">{{ item.time }}</div>
          <div class="text">{{ item.text }}</div>
        </div>
      </li>
    </ul>
    <div class="mask" v-show="show">
      <div class="dialog">
        <h3 class="title">{{ dialog.title }}</h3>
        <div class="content">{{ dialog.content }}</div>
        <button class="close" @click="hideDetail">关闭</button>
      </div>
    </div>
  </div>
</template>

<style>
.timeline {
  position: relative;
  padding: 20px 0;
}

.line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #666;
  transform: translateX(-50%);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.5;
}

li.right .content {
  text-align: right;
}

.point {
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #666;
  cursor: pointer; /* 添加鼠标手型 */
}

.time {
  margin-bottom: 5px;
  color: #999;
}

.text {
  margin-left: 10px;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  visibility: hidden; /* 初始可见性设置为hidden */
  opacity: 0; /* 初始透明度设置为0 */
  transition: visibility 0s, opacity 0.3s;
}

.dialog {
  width: 500px;
  height: 300px;
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.close {
  margin-top: 20px;
  padding: 10px 20px;
  background: #666;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
</style>

<script>
export default {
  data() {
    return {
      items: [
        {
          time: '2022-01-01',
          text: '事件1',
          detail: {
            title: '事件1详情',
            content: '这是事件1的详细内容。'
          }
        },
        {
          time: '2022-02-01',
          text: '事件2',
          detail: {
            title: '事件2详情',
            content: '这是事件2的详细内容。'
          }
        },
        {
          time: '2022-03-01',
          text: '事件3',
          detail: {
            title: '事件3详情',
            content: '这是事件3的详细内容。'
          }
        }
      ],
      show: false,
      dialog: {
        title: '',
        content: ''
      }
    }
  },
  methods: {
    showDetail(item) {
      this.dialog.title = item.detail.title;
      this.dialog.content = item.detail.content;
      this.show = true;
      setTimeout(() => {
        this.$refs.dialog.focus();
      }, 0);
    },
    hideDetail() {
      this.show = false;
    }
  }
}
</script>

在该示例代码中，我们对.point元素添加了@click事件，当用户点击某个事件卡片时，会触发showDetail方法。该方法会获取事件的详细信息，将信息写入dialog对象，并将show属性设置为true。

我们添加了一个名为mask的遮罩层，它用来展示事件详细信息的弹出框。我们通过设置遮罩层的visibility和opacity属性，来控制遮罩层的显示和隐藏。当show属性为true时，遮罩层可见性会被设置为visible，透明度会变为1，弹出框会随之显示。当用户点击弹出框中的“关闭”按钮时，show属性会被设置为false，遮罩层透明度会变为0，随后弹出框消失。