vue实现选区

Vue 实现选区的基本方法

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

使用原生Selection API

通过window.getSelection()获取当前选区对象，结合Vue的事件绑定实现选区操作：

methods: {
  handleSelection() {
    const selection = window.getSelection();
    if (selection.toString().length > 0) {
      this.selectedText = selection.toString();
      // 可以获取选区范围
      const range = selection.getRangeAt(0);
    }
  }
}

使用contenteditable元素

通过设置contenteditable属性使元素可编辑，并监听选区变化：

<div 
  contenteditable 
  @mouseup="handleSelection"
  @keyup="handleSelection"
></div>

使用第三方库

考虑使用专门处理选区的库如rangy：

import rangy from 'rangy';

mounted() {
  rangy.init();
  const highlighter = rangy.createHighlighter();
  highlighter.addClassApplier(rangy.createClassApplier('highlight'));
}

选区高亮实现

实现选中文本高亮显示：

highlightSelection() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const span = document.createElement('span');
  span.className = 'highlight';
  range.surroundContents(span);
  selection.removeAllRanges();
}

跨组件选区管理

对于需要跨组件共享选区状态的情况，可以使用Vuex：

// store.js
state: {
  selection: null
},
mutations: {
  setSelection(state, payload) {
    state.selection = payload;
  }
}

注意事项

• 选区操作应在mounted生命周期后进行，确保DOM已渲染
• 移动端需要额外处理触摸事件
• 富文本编辑器场景建议使用专业编辑器如Quill或TinyMCE
• 清除选区时调用window.getSelection().removeAllRanges()

以上方法可根据具体需求组合使用，实现从简单文本选择到复杂富文本操作的各种选区功能。