vue写一个水平可拖动的时间轴

可以使用Vue.js结合一些CSS和JavaScript代码来实现一个水平可拖动的时间轴。以下是一个简单的实现方法：

1. 首先，需要在Vue实例中声明一个数据数组，用于存储时间轴上的事件：

data() {
  return {
    events: [
      { id: 1, title: 'Event 1', date: '2022-01-01' },
      { id: 2, title: 'Event 2', date: '2022-02-01' },
      { id: 3, title: 'Event 3', date: '2022-03-01' },
      { id: 4, title: 'Event 4', date: '2022-04-01' },
      { id: 5, title: 'Event 5', date: '2022-05-01' }
    ]
  }
}

2. 在HTML模板中，创建一个时间轴容器，并使用v-for指令循环渲染每个事件：

<div class="timeline">
  <div class="event" v-for="event in events" :key="event.id">
    <div class="event-title">{{ event.title }}</div>
    <div class="event-date">{{ event.date }}</div>
  </div>
</div>

3. 使用CSS样式设置时间轴和事件的外观，并将事件的位置设置为相对于时间轴的百分比位置：

.timeline {
  position: relative;
  height: 100px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

.event {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #ccc;
  cursor: pointer;
}

.event-title {
  display: none;
}

.event-date {
  position: absolute;
  top: 100%;
  left: -50%;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #888;
}

.event.active {
  background-color: #ccc;
}

4. 在Vue的mounted生命周期钩子中，使用JavaScript代码计算每个事件在时间轴上的位置，并将其设置为事件的left样式属性：

mounted() {
  const timeline = this.$el.querySelector('.timeline')
  const events = this.$el.querySelectorAll('.event')

  events.forEach(event => {
    const eventDate = new Date(event.dataset.date)
    const timelineStartDate = new Date(this.events[0].date)
    const timelineEndDate = new Date(this.events[this.events.length - 1].date)
    const timelineDuration = timelineEndDate - timelineStartDate
    const eventDuration = eventDate - timelineStartDate
    const eventPosition = eventDuration / timelineDuration * 100

    event.style.left = `${eventPosition}%`
  })
}

5. 最后，添加一些JavaScript代码以使事件可拖动。在事件的mousedown事件处理程序中，记录事件的初始位置和时间轴的宽度。在mousemove事件处理程序中，计算事件在时间轴上的新位置，并将其设置为事件的left样式属性。在mouseup事件处理程序中，将事件的新位置保存到数据数组中。

methods: {
  startDrag(event, index) {
    this.activeEventIndex = index
    this.dragStartX = event.clientX
    this.eventStartX = parseFloat(event.target.style.left)
    this.timelineWidth = this.$el.querySelector('.timeline').offsetWidth

    document.addEventListener('mousemove', this.dragEvent)
    document.addEventListener('mouseup', this.stopDrag)
  },
  dragEvent(event) {
    const eventWidth = this.$el.querySelectorAll('.event')[this.activeEventIndex].offsetWidth
    const dragDistance = event.clientX - this.dragStartX
    const dragPosition = (this.eventStartX + dragDistance) / this.timelineWidth * 100
    const newEventPosition = Math.max(0, Math.min(dragPosition, 100 - eventWidth / this.timelineWidth * 100))

    this.events[this.activeEventIndex].position = newEventPosition
    this.$el.querySelectorAll('.event')[this.activeEventIndex].style.left = `${newEventPosition}%`
  },
  stopDrag(event) {
    document.removeEventListener('mousemove', this.dragEvent)
    document.removeEventListener('mouseup', this.stopDrag)
  }
}

完整的代码示例：https://codepen.io/lingyucoder/pen/vYJWzWj