vue.js 实现 选中文本后鼠标右键出复制菜单，并可复制文本

在 Vue.js 中实现这样一个功能，通常会在一个富文本编辑组件或者允许用户选择文本的元素上做文章。你可以结合 Vue 的事件处理和 `clipboard` API 来实现。首先确保项目已安装了 `vueClipboard2` 这样的第三方插件，可以用于复制到剪贴板的操作。

步骤如下：

1. 安装依赖：

   npm install vue-clipboard2

2. 在模板部分添加一个可以触发文本选择的元素，例如一个 `<div>` 或者 `<textarea>`：

   <template>
     <div @contextmenu.prevent="copyText" contenteditable="true">
       <!-- 插入需要用户选择的文本 -->
     </div>
   </template>

3. 在 script 部分引入并注册 `vueClipboard2` 组件：

   import Clipboard from 'vue-clipboard2';

   export default {
     components: {
       Clipboard,
     },
     methods: {
       copyText(e) {
         const selectedText = window.getSelection().toString(); // 获取选中的文本
         this.$clipboard.write(selectedText); // 使用 vueClipboard2 复制文本
         e.preventDefault(); // 阻止浏览器默认的右键菜单显示
       },
     },
   };

4. 如果你想要提供一个自定义的右键菜单，可以创建一个新的组件或者在 `mounted()` 生命周期钩子里动态添加一个 `context-menu` 指令，展示你的复制选项：

   <template>
     <div @contextmenu.prevent="showMenu" v-context-menu:items="copyMenuItems" />
   </template>

   <script>
   // ...
   data() {
     return {
       showMenu: false,
       copyMenuItems: [
         { name: 'Copy', value: () => this.copyText(), disabled: false },
         // 添加更多你需要的选项...
       ],
     };
   },
   // ...

然后在 `methods` 中定义 `showMenu` 和每个选项的点击回调。

记住，这只是一个基础示例，实际应用可能还需要处理其他情况，比如阻止浏览器默认的右键菜单、优化用户体验等。