vue 自定义日历拖拽

你可以使用 Vue.js 来自定义日历组件，并通过拖拽功能实现拖动事件的功能。下面是一个简单的示例代码：

<template>
  <div class="calendar">
    <div class="weekdays">
      <div v-for="day in 7" :key="day" class="weekday">{{ getWeekday(day) }}</div>
    </div>
    <div class="days">
      <div v-for="(date, index) in dates" :key="index" class="day" @mousedown="startDrag(index)">
        {{ date }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dates: [1, 2, 3, 4, 5, 6, 7], // 替换为你的日期数组
      draggingIndex: -1,
      draggingOffset: 0,
    };
  },
  methods: {
    getWeekday(day) {
      // 获取星期几的逻辑
      // 可根据具体需求进行实现
    },
    startDrag(index) {
      this.draggingIndex = index;
      this.draggingOffset = 0;

      // 添加鼠标移动和松开事件监听
      document.addEventListener("mousemove", this.handleDrag);
      document.addEventListener("mouseup", this.endDrag);
    },
    handleDrag(event) {
      // 计算鼠标在X轴上的位移
      this.draggingOffset = event.pageX - event.target.getBoundingClientRect().left;
    },
    endDrag() {
      // 更新拖动后的日期数组
      // 可根据具体需求进行实现

      // 清除事件监听
      document.removeEventListener("mousemove", this.handleDrag);
      document.removeEventListener("mouseup", this.endDrag);

      this.draggingIndex = -1;
      this.draggingOffset = 0;
    },
  },
};
</script>

<style>
.calendar {
  width: 300px;
  border: 1px solid #ccc;
}

.weekdays {
  display: flex;
}

.weekday {
  flex: 1;
  text-align: center;
}

.days {
  display: flex;
  flex-wrap: wrap;
}

.day {
  width: calc(100% / 7);
  height: 50px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

上述代码是一个简单的日历组件，通过 `@mousedown` 监听鼠标按下事件，`@mousemove` 监听鼠标移动事件，`@mouseup` 监听鼠标松开事件。在拖动过程中，计算鼠标在X轴上的位移，并更新拖动后的日期数组。你可以根据具体需求进行修改和优化。