vue实现文本选中
Vue 实现文本选中功能的方法
使用 window.getSelection() API
在 Vue 中可以通过 window.getSelection() 获取用户选中的文本内容。监听 mouseup 或 selectionchange 事件，触发选中文本的逻辑。
<template>
<div @mouseup="handleTextSelection">
<p>这里是需要选中的文本内容...</p>
</div>
</template>
<script>
export default {
methods: {
handleTextSelection() {
const selection = window.getSelection();
const selectedText = selection.toString();
if (selectedText) {
console.log('选中的文本:', selectedText);
// 其他处理逻辑
}
}
}
}
</script>自定义指令实现选中高亮
通过 Vue 自定义指令可以封装文本选中逻辑，便于复用。以下是一个选中高亮指令的实现示例：
Vue.directive('highlight', {
bind(el, binding) {
el.addEventListener('mouseup', () => {
const selection = window.getSelection();
const selectedText = selection.toString();
if (selectedText) {
const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.className = 'highlight';
range.surroundContents(span);
}
});
}
});使用第三方库
如果需要更复杂的功能（如跨段落选中、持久化高亮等），可以使用以下库：
- Rangy：提供跨浏览器兼容的文本选中和高亮功能。
- Highlight.js：专注于代码高亮，但也可用于普通文本。
安装 Rangy 示例：
npm install rangy使用示例：
import rangy from 'rangy';
export default {
methods: {
highlightSelection() {
rangy.init();
const highlighter = rangy.createHighlighter();
highlighter.addClassApplier(rangy.createClassApplier('highlight'));
highlighter.highlightSelection('highlight');
}
}
}样式优化
为选中高亮添加 CSS 样式：
.highlight {
background-color: yellow;
color: black;
}注意事项
- 跨浏览器兼容性：
window.getSelection()在大多数现代浏览器中可用，但旧版 IE 可能需要特殊处理。 - 性能：频繁操作 DOM 可能影响性能，建议对高亮操作进行防抖处理。
