当前位置：首页 > VUE

vue实现选区

2026-02-09 23:32:42VUE

Vue 实现选区的方法

在 Vue 中实现选区功能可以通过原生 DOM API 结合 Vue 的响应式特性完成。以下是几种常见场景的实现方法：

基于原生 Selection API

使用浏览器提供的 Selection 和 Range API 实现基础选区操作：

// 获取选区内容
const getSelectedText = () => {
  return window.getSelection().toString();
};

// 高亮选区
const highlightSelection = () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const span = document.createElement('span');
    span.style.backgroundColor = 'yellow';
    range.surroundContents(span);
  }
};

在 Vue 组件中通过 @mouseup 事件触发：

<template>
  <div @mouseup="handleSelection">
    <!-- 可选中内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleSelection() {
      const selectedText = getSelectedText();
      if (selectedText) {
        highlightSelection();
        this.$emit('selection-change', selectedText);
      }
    }
  }
}
</script>

自定义选区组件

封装可复用的选区组件，支持动态渲染和事件监听：

<template>
  <div 
    ref="selectable"
    @mousedown="startSelection"
    @mousemove="updateSelection"
    @mouseup="endSelection"
  >
    <slot></slot>
    <div 
      v-if="showSelectionBox"
      class="selection-box"
      :style="boxStyle"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startPos: { x: 0, y: 0 },
      currentPos: { x: 0, y: 0 },
      isSelecting: false
    };
  },
  computed: {
    showSelectionBox() {
      return this.isSelecting;
    },
    boxStyle() {
      return {
        left: `${Math.min(this.startPos.x, this.currentPos.x)}px`,
        top: `${Math.min(this.startPos.y, this.currentPos.y)}px`,
        width: `${Math.abs(this.currentPos.x - this.startPos.x)}px`,
        height: `${Math.abs(this.currentPos.y - this.startPos.y)}px`
      };
    }
  },
  methods: {
    startSelection(e) {
      this.startPos = { x: e.clientX, y: e.clientY };
      this.currentPos = { ...this.startPos };
      this.isSelecting = true;
    },
    updateSelection(e) {
      if (this.isSelecting) {
        this.currentPos = { x: e.clientX, y: e.clientY };
      }
    },
    endSelection() {
      this.isSelecting = false;
      const elements = this.getSelectedElements();
      this.$emit('selection-end', elements);
    },
    getSelectedElements() {
      // 实现元素碰撞检测逻辑
    }
  }
};
</script>

第三方库集成

使用现成的 Vue 选区库如 vue-highlight-words 或 vue-text-selection：

npm install vue-text-selection

示例用法：

<template>
  <text-selection @select="onTextSelected">
    <p>This is selectable text content</p>
  </text-selection>
</template>

<script>
import TextSelection from 'vue-text-selection';

export default {
  components: { TextSelection },
  methods: {
    onTextSelected(selectedText) {
      console.log('Selected:', selectedText);
    }
  }
};
</script>

跨元素选区处理

对于跨多个动态元素的选区，需结合 ref 和 Range API：

methods: {
  getCrossElementSelection() {
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const startNode = range.startContainer.parentNode;
    const endNode = range.endContainer.parentNode;

    // 遍历节点之间的所有元素
    const nodesBetween = [];
    let currentNode = startNode;
    while (currentNode !== endNode) {
      nodesBetween.push(currentNode);
      currentNode = currentNode.nextSibling;
    }

    return {
      startNode,
      endNode,
      nodesBetween,
      text: selection.toString()
    };
  }
}

样式与交互优化

添加视觉反馈和交互增强：

::selection {
  background-color: #4299e1;
  color: white;
}

.selection-box {
  position: absolute;
  background: rgba(66, 153, 225, 0.3);
  border: 1px dashed #4299e1;
  pointer-events: none;
  z-index: 999;
}