当前位置：首页 > VUE

vue实现框选效果

2026-02-19 10:35:50VUE

Vue 实现框选效果的方法

框选效果通常用于实现类似桌面应用中鼠标拖动选择多个元素的功能。以下是几种常见的实现方式：

vue实现框选效果

基于鼠标事件的实现

监听鼠标的 mousedown、mousemove 和 mouseup 事件来绘制选择框：

vue实现框选效果

<template>
  <div 
    class="container"
    @mousedown="startSelection"
    @mousemove="updateSelection"
    @mouseup="endSelection"
  >
    <div class="selection-box" v-if="isSelecting" :style="boxStyle"></div>
    <!-- 可选择的项目 -->
    <div 
      v-for="item in items" 
      :key="item.id"
      class="selectable-item"
      :class="{ selected: isSelected(item) }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSelecting: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
      selectedItems: []
    }
  },
  computed: {
    boxStyle() {
      return {
        left: Math.min(this.startX, this.currentX) + 'px',
        top: Math.min(this.startY, this.currentY) + 'px',
        width: Math.abs(this.currentX - this.startX) + 'px',
        height: Math.abs(this.currentY - this.startY) + 'px'
      }
    }
  },
  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
      this.checkSelection()
    },
    endSelection() {
      this.isSelecting = false
    },
    checkSelection() {
      // 实现碰撞检测逻辑
    },
    isSelected(item) {
      return this.selectedItems.includes(item.id)
    }
  }
}
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.selection-box {
  position: absolute;
  background: rgba(0, 120, 215, 0.1);
  border: 1px solid rgba(0, 120, 215, 0.8);
}

.selectable-item {
  position: absolute;
  /* 设置项目位置 */
}

.selectable-item.selected {
  background: rgba(0, 120, 215, 0.3);
}
</style>

使用第三方库

对于更复杂的需求，可以考虑使用专门处理选择操作的库：

interact.js - 提供拖放、调整大小和手势支持
selectable.js - 专门处理选择操作
d3-drag - D3的拖拽模块，可用于实现选择

基于Canvas的实现

如果需要高性能的框选效果，可以使用Canvas：

<template>
  <canvas 
    ref="canvas"
    @mousedown="startSelection"
    @mousemove="updateSelection"
    @mouseup="endSelection"
  ></canvas>
</template>

<script>
export default {
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d')
    // 初始化canvas尺寸等
  },
  methods: {
    startSelection(e) {
      const rect = this.$refs.canvas.getBoundingClientRect()
      this.startX = e.clientX - rect.left
      this.startY = e.clientY - rect.top
      this.isSelecting = true
    },
    updateSelection(e) {
      if (!this.isSelecting) return

      const rect = this.$refs.canvas.getBoundingClientRect()
      this.currentX = e.clientX - rect.left
      this.currentY = e.clientY - rect.top

      this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
      this.drawSelectionBox()
    },
    drawSelectionBox() {
      this.ctx.strokeStyle = 'blue'
      this.ctx.lineWidth = 1
      this.ctx.beginPath()
      this.ctx.rect(
        this.startX,
        this.startY,
        this.currentX - this.startX,
        this.currentY - this.startY
      )
      this.ctx.stroke()
    }
  }
}
</script>