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

在 Vue.js 中，原生 JavaScript 通过处理用户事件和操作文档对象模型 (DOM) 来实现在选中文本后弹出右键复制菜单的功能。以下是简单的步骤：

1. 首先，在模板（HTML）上添加一个可编辑的输入框或者其他可以聚焦元素，并绑定 `@contextmenu` 或者 `@copyEvent` 等自定义事件监听器。

<div contenteditable="true" @copyEvent="copyText">点击这里选择文字然后按右键</div>

2. 创建一个 JavaScript 函数来捕获 `contextmenu` 事件，并阻止浏览器默认的行为，通常会显示系统上下文菜单。然后手动创建并展示复制选项。

export default {
  methods: {
    copyText(event) {
      event.preventDefault(); // 阻止浏览器默认操作

      const selection = window.getSelection();
      if (!selection.rangeCount) return; // 没有选中内容，跳过

      let textToCopy = '';
      for (let range of selection.getRanges()) {
        if (range.commonAncestorNode.nodeType === Node.TEXT_NODE) {
          textToCopy += range.commonAncestorNode.textContent;
        }
      }

      const menu = document.createElement('ul');
      const li = document.createElement('li');
      li.textContent = '复制';
      li.addEventListener('click', () => {
        navigator.clipboard.writeText(textToCopy);
      });
      menu.appendChild(li);

      const event = new MouseEvent('contextmenu', {
        bubbles: true,
        cancelable: true,
        view: window,
        detail: 0,
      });
      menu.dispatchEvent(event); // 手动模拟 contextmenu 事件，显示复制菜单

      // 清理菜单
      setTimeout(() => menu.remove(), 100);
    },
  },
};

这个例子中，当用户选中文本后触发 `copyText` 方法，我们获取选区内的文本，创建一个简单的右键菜单，点击“复制”按钮时使用 `navigator.clipboard.writeText` 将文本复制到剪贴板。