vue实现框选

Vue 实现框选功能

框选功能通常用于在页面上通过鼠标拖动选择一个区域，常见于图形编辑器、表格批量操作等场景。以下是基于 Vue 的实现方法：

监听鼠标事件

在 Vue 组件的 mounted 钩子中绑定鼠标事件：

mounted() {
  document.addEventListener('mousedown', this.startSelection);
  document.addEventListener('mousemove', this.updateSelection);
  document.addEventListener('mouseup', this.endSelection);
},
beforeDestroy() {
  document.removeEventListener('mousedown', this.startSelection);
  document.removeEventListener('mousemove', this.updateSelection);
  document.removeEventListener('mouseup', this.endSelection);
}

记录起始位置

创建数据变量存储框选状态：

data() {
  return {
    isSelecting: false,
    startX: 0,
    startY: 0,
    currentX: 0,
    currentY: 0
  }
},
methods: {
  startSelection(e) {
    this.isSelecting = true;
    this.startX = e.clientX;
    this.startY = e.clientY;
    this.currentX = e.clientX;
    this.currentY = e.clientY;
  }
}

绘制选择框

在 updateSelection 方法中计算框选区域：

updateSelection(e) {
  if (!this.isSelecting) return;
  this.currentX = e.clientX;
  this.currentY = e.clientY;

  // 计算框选区域样式
  const left = Math.min(this.startX, this.currentX);
  const top = Math.min(this.startY, this.currentY);
  const width = Math.abs(this.currentX - this.startX);
  const height = Math.abs(this.currentY - this.startY);

  // 更新DOM元素样式
  const selectionBox = document.getElementById('selection-box');
  if (selectionBox) {
    selectionBox.style.left = `${left}px`;
    selectionBox.style.top = `${top}px`;
    selectionBox.style.width = `${width}px`;
    selectionBox.style.height = `${height}px`;
  }
}

模板中添加选择框元素

<template>
  <div class="container">
    <!-- 其他内容 -->
    <div 
      id="selection-box" 
      v-show="isSelecting"
      class="selection-box"
    ></div>
  </div>
</template>

<style>
.selection-box {
  position: absolute;
  border: 1px dashed #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
  pointer-events: none;
}
</style>

检测选中元素

在 endSelection 方法中检测被框选的元素：

endSelection() {
  if (!this.isSelecting) return;
  this.isSelecting = false;

  const elements = document.querySelectorAll('.selectable-item');
  const selectedElements = [];

  elements.forEach(el => {
    const rect = el.getBoundingClientRect();
    if (this.isElementInSelection(rect)) {
      selectedElements.push(el);
    }
  });

  // 处理选中元素
  this.$emit('selection-change', selectedElements);
},
isElementInSelection(rect) {
  const selectionLeft = Math.min(this.startX, this.currentX);
  const selectionRight = Math.max(this.startX, this.currentX);
  const selectionTop = Math.min(this.startY, this.currentY);
  const selectionBottom = Math.max(this.startY, this.currentY);

  return !(
    rect.right < selectionLeft ||
    rect.left > selectionRight ||
    rect.bottom < selectionTop ||
    rect.top > selectionBottom
  );
}

性能优化建议

对于大量可选中元素的情况，可以使用虚拟滚动技术或四叉树空间索引来优化检测性能。也可以考虑使用第三方库如 interact.js 来实现更复杂的拖拽选择交互。

完整组件示例

export default {
  name: 'SelectionBox',
  data() {
    return {
      isSelecting: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0
    }
  },
  methods: {
    startSelection(e) {
      this.isSelecting = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.currentX = e.clientX;
      this.currentY = e.clientY;
    },
    updateSelection(e) {
      if (!this.isSelecting) return;
      this.currentX = e.clientX;
      this.currentY = e.clientY;

      const left = Math.min(this.startX, this.currentX);
      const top = Math.min(this.startY, this.currentY);
      const width = Math.abs(this.currentX - this.startX);
      const height = Math.abs(this.currentY - this.startY);

      const selectionBox = document.getElementById('selection-box');
      if (selectionBox) {
        selectionBox.style.left = `${left}px`;
        selectionBox.style.top = `${top}px`;
        selectionBox.style.width = `${width}px`;
        selectionBox.style.height = `${height}px`;
      }
    },
    endSelection() {
      if (!this.isSelecting) return;
      this.isSelecting = false;

      const elements = document.querySelectorAll('.selectable-item');
      const selectedElements = [];

      elements.forEach(el => {
        const rect = el.getBoundingClientRect();
        if (this.isElementInSelection(rect)) {
          selectedElements.push(el);
        }
      });

      this.$emit('selection-change', selectedElements);
    },
    isElementInSelection(rect) {
      const selectionLeft = Math.min(this.startX, this.currentX);
      const selectionRight = Math.max(this.startX, this.currentX);
      const selectionTop = Math.min(this.startY, this.currentY);
      const selectionBottom = Math.max(this.startY, this.currentY);

      return !(
        rect.right < selectionLeft ||
        rect.left > selectionRight ||
        rect.bottom < selectionTop ||
        rect.top > selectionBottom
      );
    }
  },
  mounted() {
    document.addEventListener('mousedown', this.startSelection);
    document.addEventListener('mousemove', this.updateSelection);
    document.addEventListener('mouseup', this.endSelection);
  },
  beforeDestroy() {
    document.removeEventListener('mousedown', this.startSelection);
    document.removeEventListener('mousemove', this.updateSelection);
    document.removeEventListener('mouseup', this.endSelection);
  }
}