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)
}
