vue3实现鼠标右键事件获取鼠标左键选中的文本

在Vue3中，实现鼠标右键事件并获取鼠标左键选中的文本通常需要结合HTML5的`contextmenu`事件和`selection` API。下面是一个简单的示例：

首先，在模板（`.vue`文件的`<template>`部分）里添加一个允许右键点击的元素，并绑定自定义的`handleRightClick`方法：

<div @contextmenu.prevent="handleRightClick($event)">
  <!-- 其他内容 -->
</div>

然后在组件的methods中定义`handleRightClick`函数，这个函数会检查是否有文本被选中：

export default {
  methods: {
    handleRightClick(event) {
      // 阻止默认的右键菜单
      event.preventDefault();

      if (!window.getSelection || !window.getSelection().rangeCount) return;

      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const text = range.extractContents(); // 获取选中的文本
        console.log('选中的文本:', text);
        // 这里可以进一步处理选中的文本
      }
    },
  },
}

当用户在该元素上右键点击并且有文本被选中时，控制台将会打印出选中的文本。请注意这只是一个基础示例，实际应用可能需要对选中的文本进行更复杂的操作。