vue实现选区

Vue 实现选区的基本方法

在 Vue 中实现选区功能通常涉及 DOM 操作和事件处理。以下是几种常见的方法：

使用 window.getSelection() 和 document.createRange() 通过监听鼠标事件获取用户选择的文本范围，结合 Vue 的响应式特性更新数据。

export default {
  methods: {
    handleSelection() {
      const selection = window.getSelection();
      if (selection.toString().length > 0) {
        this.selectedText = selection.toString();
      }
    }
  },
  mounted() {
    document.addEventListener('mouseup', this.handleSelection);
  },
  beforeDestroy() {
    document.removeEventListener('mouseup', this.handleSelection);
  }
}

自定义指令实现选区

创建 Vue 指令可以更优雅地封装选区逻辑：

Vue.directive('selectable', {
  bind(el, binding) {
    el.addEventListener('mouseup', () => {
      const selection = window.getSelection();
      if (selection.toString().length > 0) {
        binding.value(selection.toString());
      }
    });
  }
});

使用方式：

<div v-selectable="handleSelection">可选区内容...</div>

富文本编辑器集成

对于复杂需求，可以集成现成的富文本编辑器库：

import Quill from 'quill';

export default {
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.editor = new Quill('#editor', {
      modules: { toolbar: true },
      theme: 'snow'
    });
    this.editor.on('selection-change', (range) => {
      if (range) {
        this.handleSelection(this.editor.getText(range.index, range.length));
      }
    });
  }
}

选区样式高亮

实现选区高亮效果可以通过动态添加 CSS 类：

.highlight {
  background-color: yellow;
}

methods: {
  highlightSelection() {
    const range = window.getSelection().getRangeAt(0);
    const span = document.createElement('span');
    span.className = 'highlight';
    range.surroundContents(span);
  }
}

跨组件选区管理

使用 Vuex 管理全局选区状态：

const store = new Vuex.Store({
  state: {
    selection: null
  },
  mutations: {
    setSelection(state, payload) {
      state.selection = payload;
    }
  }
});

组件中调用：

this.$store.commit('setSelection', window.getSelection());

移动端兼容处理

针对移动设备需要添加触摸事件支持：

mounted() {
  if ('ontouchstart' in window) {
    document.addEventListener('touchend', this.handleTouchSelection);
  } else {
    document.addEventListener('mouseup', this.handleSelection);
  }
}

选区边界处理

处理选区跨元素的情况：

function getSelectedHTML() {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const div = document.createElement('div');
  div.appendChild(range.cloneContents());
  return div.innerHTML;
}

性能优化建议

对于频繁的选区操作，建议使用防抖技术：

import { debounce } from 'lodash';

methods: {
  handleSelection: debounce(function(selection) {
    // 处理逻辑
  }, 300)
}