vue2写一个24小时时间轴可拖动进度条

您可以使用Vue2和CSS3来创建一个24小时时间轴可拖动进度条。以下是实现步骤：

1. 首先，在您的Vue组件中创建一个容器元素来包含时间轴和进度条：

<div class="timeline-container">
  <div class="timeline"></div>
  <div class="progress-bar"></div>
</div>

2. 在CSS文件中定义时间轴和进度条的样式：

.timeline-container {
  position: relative;
  width: 100%;
  height: 50px;
}

.timeline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  background-color: #007bff;
  cursor: pointer;
}

在上面的示例中，我们定义了一个容器元素，一个时间轴元素和一个进度条元素。时间轴元素的宽度为100%，高度为50px，背景颜色为灰色，边框为1px实线。进度条元素的宽度为10px，高度为100%，背景颜色为蓝色，光标为指针。

3. 在您的Vue组件中使用Vue的`mounted`生命周期钩子来初始化进度条元素的位置和绑定拖拽事件：

mounted() {
  const progressBar = document.querySelector('.progress-bar');
  const timeline = document.querySelector('.timeline');
  const timelineWidth = timeline.offsetWidth - progressBar.offsetWidth;
  progressBar.style.left = '0px';
  progressBar.addEventListener('mousedown', function(event) {
    const startX = event.pageX - progressBar.offsetLeft;
    const offsetX = timelineWidth / 24;
    document.addEventListener('mousemove', moveProgressBar);
    function moveProgressBar(event) {
      let left = event.pageX - startX;
      if (left < 0) {
        left = 0;
      }
      if (left > timelineWidth) {
        left = timelineWidth;
      }
      const hour = Math.floor(left / offsetX);
      const minute = Math.floor((left % offsetX) / (offsetX / 60));
      const time = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
      progressBar.style.left = `${left}px`;
      console.log(time);
    }
    document.addEventListener('mouseup', function() {
      document.removeEventListener('mousemove', moveProgressBar);
    });
  });
}

在上面的示例中，我们获取了进度条和时间轴元素，然后计算出时间轴的宽度，并将进度条的位置初始化为0。我们绑定了进度条的`mousedown`事件，并在事件处理程序中计算出鼠标的起始位置和时间轴每个小时的偏移量。然后，我们绑定了文档的`mousemove`和`mouseup`事件，以便在拖动进度条时更新进度条的位置，并输出当前的时间。

4. 最后，您可以在控制台中看到输出的时间，并在事件处理程序中使用它来更新您的Vue组件中的数据。

总之，您可以使用Vue2和CSS3来创建一个24小时时间轴可拖动进度条，然后在进度条被拖动时更新进度条的位置，并输出当前的时间。