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()
以上方法可根据具体需求组合使用，实现从简单文本选择到复杂富文本操作的各种选区功能。
