vue 格子点击事件加拖动选中事件

在 Vue 中实现格子的点击事件和拖动选中事件可以使用以下步骤：

在 data 中定义格子列表和选中的格子列表：

data() {
  return {
    gridList: [], // 格子列表
    selectedGrids: [], // 选中的格子列表
    isDragging: false // 是否正在拖动
  };
}

在 mounted 钩子函数中初始化格子列表：

mounted() {
  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      this.gridList.push({ row: i, col: j, selected: false });
    }
  }
}

在 template 中使用 v-for 循环渲染格子列表，并绑定点击事件和鼠标事件：

<template>
  <div class="grid-container">
    <div class="grid"
         v-for="(grid, index) in gridList"
         :key="index"
         :class="{ selected: grid.selected }"
         @mousedown="mouseDown(index)"
         @mouseover="mouseOver(index)"
         @mouseup="mouseUp(index)"
         @click="clickGrid(index)"
    >
      {{ grid.row }} - {{ grid.col }}
    </div>
  </div>
</template>

实现点击事件和鼠标事件的方法：

methods: {
  clickGrid(index) {
    // 点击格子时，切换选中状态
    this.gridList[index].selected = !this.gridList[index].selected;
  },
  mouseDown(index) {
    // 鼠标按下时，记录起始格子的索引，并开启拖动状态
    this.startIndex = index;
    this.isDragging = true;
  },
  mouseOver(index) {
    if (!this.isDragging) {
      return;
    }
    // 鼠标移动时，更新选中的格子列表
    this.selectedGrids = [];
    const startRow = this.gridList[this.startIndex].row;
    const startCol = this.gridList[this.startIndex].col;
    const endRow = this.gridList[index].row;
    const endCol = this.gridList[index].col;
    for (let i = Math.min(startRow, endRow); i <= Math.max(startRow, endRow); i++) {
      for (let j = Math.min(startCol, endCol); j <= Math.max(startCol, endCol); j++) {
        const gridIndex = i * 10 + j;
        this.selectedGrids.push(gridIndex);
      }
    }
    // 更新格子的选中状态
    this.gridList.forEach((grid, i) => {
      grid.selected = this.selectedGrids.includes(i);
    });
  },
  mouseUp(index) {
    // 鼠标松开时，结束拖动状态
    this.isDragging = false;
  }
}

这样就实现了 Vue 中格子点击事件加拖动选中事件的效果