在 Vue 3 中，实现文本划词并出现操作菜单，可以通过以下步骤完成：
1.捕捉文本选择事件：使用 mouseup 事件监听用户完成文本选择。
2.获取选中的文本：使用 window.getSelection() 获取用户选择的文本。
3.显示操作菜单：在用户选择文本后，显示一个上下文菜单。
<template>
<div @mouseup="handleMouseUp">
<p>这是一个示例文本。当你选择这个文本的一部分时，会出现一个操作菜单。</p>
<div v-if="showMenu" :style="menuStyle" class="context-menu">
<button @click="copyText">复制</button>
<button @click="searchText">搜索</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const showMenu = ref(false)
const menuStyle = ref({
top: '0px',
left: '0px'
})
const selectedText = ref('')
const handleMouseUp = (event) => {
const selection = window.getSelection()
const text = selection.toString()
if (text) {
selectedText.value = text
const range = selection.getRangeAt(0)
const rect = range.getBoundingClientRect()
menuStyle.value = {
top: `${rect.bottom + window.scrollY}px`,
left: `${rect.left + window.scrollX}px`
};
showMenu.value = true
} else {
showMenu.value = false
}
}
const copyText = () => {
navigator.clipboard.writeText(selectedText.value)
.then(() => {
alert('文本已复制')
showMenu.value = false
})
.catch(err => {
console.error('复制失败: ', err)
})
}
const searchText = () => {
const url = 'https://www.baidu.com'
window.open(url, '_blank')
showMenu.value = false
}
</script>
<style>
.context-menu {
position: absolute;
background-color: white;
border: 1px solid #ccc;
padding: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
button {
margin: 0 5px;
}
</style>
