vue实现横向时间轴

下面是Vue实现横向时间轴的完整攻略。

实现思路

实现横向时间轴的关键在于CSS部分的设计。我们需要定义好每个时间点的样式以及它们之间的间隔。

在Vue中，我们可以采用循环遍历的方式，动态生成时间点列表。同时，为了实现滚动效果，我们需要监听鼠标事件，并且动态计算容器滚动的距离。

具体实现

第一步：HTML结构

我们需要先定义好HTML结构。

<div class="container">
  <div class="timeline">
    <div class="timeline-item" v-for="(item, index) in timelineList" :key="index" :style="{ left: item.left + 'px' }" >
      <div class="timeline-item-title">
        {{ item.year }}
      </div>
    </div>
  </div>
</div>

其中，container为容器，timeline为横向时间轴的包裹容器，timeline-item为每个时间点对应的元素，timeline-item-title为每个时间点的标题。

第二步：CSS样式

接下来，我们需要定义相应的CSS样式。

.container {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
}

.timeline {
  height: 4px;
  background-color: #ddd;
  position: relative;
}

.timeline-item {
  position: absolute;
  top: -6px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 50%;
}

.timeline-item-title {
  text-align: center;
  white-space: nowrap;
  width: 60px;
  margin-left: -20px;
  font-size: 12px;
}

其中，container设置为可滚动的，同时用white-space: nowrap属性来防止换行。timeline为横向时间轴的底部，用来承载每个时间点。timeline-item为每个时间点对应的元素，设置为绝对定位，用display: inline-block来实现在同一行的效果。timeline-item-title为每个时间点的标题，用width属性来设置标题的长度，当长度超过时间点宽度时，会自动换行。

第三步：Vue逻辑

最后，我们需要用Vue来实现动态绑定时间点数据以及计算容器滚动距离。

export default {
  data() {
    return {
      timelineList: [
        { year: '2021', left: 0 },
        { year: '2022', left: 100 },
        { year: '2023', left: 200 },
        { year: '2024', left: 300 },
        { year: '2025', left: 400 },
        { year: '2026', left: 500 },
        { year: '2027', left: 600 },
        { year: '2028', left: 700 },
        { year: '2029', left: 800 },
      ],
      containerWidth: 0,
      isDragging: false,
      lastClientX: 0,
      scrollLeft: 0,
    };
  },
  computed: {
    containerStyle() {
      return {
        width: `${this.containerWidth}px`,
      };
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.containerWidth = this.$refs.container.clientWidth;
    });

    window.addEventListener('mousemove', this.handleMouseMove);
    window.addEventListener('mouseup', this.handleMouseUp);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.handleMouseMove);
    window.removeEventListener('mouseup', this.handleMouseUp);
  },
  methods: {
    handleMouseDown(event) {
      this.isDragging = true;
      this.lastClientX = event.clientX;
      this.scrollLeft = this.$refs.container.scrollLeft;
    },
    handleMouseMove(event) {
      if (!this.isDragging) {
        return;
      }

      const deltaX = event.clientX - this.lastClientX;
      const newScrollLeft = this.scrollLeft - deltaX;
      this.$refs.container.scrollLeft = newScrollLeft;
    },
    handleMouseUp(event) {
      this.isDragging = false;
    },
  },
};

其中，timelineList为存储时间点数据的数组，left属性用来动态计算每个时间点离底部的距离。containerWidth为容器的宽度，用来计算滚动距离。isDragging、lastClientX、scrollLeft用来记录是否拖拽，上次的鼠标位置以及当前容器的滚动距离。

为了实现拖拽滚动的效果，我们需要监听鼠标事件，并且计算拖拽的距离来实现容器的滚动。

示例

以下是两个基于Vue实现的横向时间轴的示例：

• Vue Timeline Component：Vue官方的timeline组件，采用CSS3实现横向滚动效果。
• Vue Horizontal Timeline：基于Vue2实现的横向时间轴，包含滑动等交互效果。