当前位置：首页 > VUE

vue实现框选

2026-01-08 01:25:53VUE

Vue 实现框选功能

在 Vue 中实现框选功能通常需要监听鼠标事件，计算选区范围，并根据选区范围高亮或选中元素。以下是实现框选功能的关键步骤。

监听鼠标事件

在 Vue 模板中，为容器元素绑定鼠标按下、移动和抬起事件：

<template>
  <div 
    @mousedown="startSelection"
    @mousemove="updateSelection"
    @mouseup="endSelection"
    class="selection-container"
  >
    <!-- 其他内容 -->
    <div 
      v-if="isSelecting" 
      class="selection-box" 
      :style="selectionStyle"
    ></div>
  </div>
</template>

记录选区坐标

在 Vue 的 data 或 setup 中定义变量，记录选区的起始和当前坐标：

data() {
  return {
    isSelecting: false,
    startX: 0,
    startY: 0,
    currentX: 0,
    currentY: 0,
  };
},

计算选区样式

通过计算属性动态生成选区的样式：

computed: {
  selectionStyle() {
    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);
    return {
      left: `${left}px`,
      top: `${top}px`,
      width: `${width}px`,
      height: `${height}px`,
    };
  },
},

实现事件处理逻辑

在 methods 中定义鼠标事件的处理函数：

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) {
      this.currentX = e.clientX;
      this.currentY = e.clientY;
      // 可选：检查哪些元素在选区内
      this.checkSelectedElements();
    }
  },
  endSelection() {
    this.isSelecting = false;
    // 可选：处理最终选中的元素
    this.finalizeSelection();
  },
},

检测元素是否在选区内

添加逻辑检测元素是否位于选区范围内：

checkSelectedElements() {
  const elements = document.querySelectorAll('.selectable-item');
  elements.forEach(el => {
    const rect = el.getBoundingClientRect();
    const isInSelection = 
      rect.left < Math.max(this.startX, this.currentX) &&
      rect.right > Math.min(this.startX, this.currentX) &&
      rect.top < Math.max(this.startY, this.currentY) &&
      rect.bottom > Math.min(this.startY, this.currentY);
    // 根据 isInSelection 更新元素状态
    el.classList.toggle('selected', isInSelection);
  });
},

样式示例

为选区和被选中元素添加基本样式：

vue实现框选

.selection-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.selection-box {
  position: absolute;
  background: rgba(100, 180, 255, 0.2);
  border: 1px solid rgba(100, 180, 255, 0.8);
  pointer-events: none;
}
.selectable-item {
  /* 可选中元素的样式 */
}
.selectable-item.selected {
  background: rgba(100, 180, 255, 0.3);
}