vue 写时间组件 横轴是时间 可以拖动

你可以使用 Vue.js 结合第三方库来实现一个可拖动的时间组件，下面是一个基本的实现思路：

1. 安装依赖：你可以使用 Moment.js 库来处理时间和日期，使用 Vue.Draggable 库来实现拖动功能。

npm install moment vue-draggable --save

2. 创建一个时间组件：在 Vue 组件中，你可以使用 `data` 对象来存储时间数组和当前选中的时间。你还需要在 `mounted` 钩子函数中初始化时间数组。

<template>
  <div class="time-component">
    <div class="time-axis">
      <div class="time-point" v-for="time in times" :key="time">{{ time }}</div>
    </div>
    <draggable v-model="times" class="time-axis" axis="x" :move="onMove">
      <div class="time-point" v-for="time in times" :key="time">{{ time }}</div>
    </draggable>
  </div>
</template>

<script>
import moment from 'moment'
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      times: [],
      selectedTime: moment(),
    }
  },
  mounted() {
    for (let i = 0; i < 24; i++) {
      this.times.push(moment().startOf('day').add(i, 'hours').format('HH:mm'))
    }
  },
  methods: {
    onMove(event) {
      // 可以在这里处理拖动事件
    },
  },
}
</script>

3. 实现拖动功能：在 `methods` 中，你可以处理拖动事件并更新 `times` 数组。你可以使用 `moment` 库来解析和格式化时间。

onMove(event) {
  const { movement: { x } } = event
  const index = event.draggedContext.index
  const time = moment(this.times[index], 'HH:mm').add(x, 'minutes').format('HH:mm')
  this.$set(this.times, index, time)
},

4. 样式设计：使用 CSS 样式来美化时间组件。

.time-component {
  position: relative;
  width: 100%;
  height: 100px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.time-axis {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
}

.time-point {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #ccc;
  padding: 10px 0;
}

这样，你就可以创建一个基本的可拖动时间组件了。