在 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>