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

Vue.js本身是一个前端框架，主要用于构建用户界面，但它并不直接提供HTML原生元素操作的功能，如鼠标事件监听或复制功能。然而，你可以结合JavaScript（原生JS）来实现这个需求。下面是一个简单的示例：

首先，在HTML中设置一个可编辑的输入元素，比如`<input>`，并且给它添加一个`contenteditable`属性使其内容可编辑：

<div contenteditable="true" @contextmenu.prevent="showCopyMenu">在此处输入文本</div>

然后，在Vue实例中定义`showCopyMenu`方法，当鼠标右键点击（`contextmenu`事件）时显示复制菜单，并绑定一个函数来处理复制操作：

export default {
  methods: {
    showCopyMenu(e) {
      const selectedText = window.getSelection().toString();
      this.copyText = selectedText; // 储存将要复制的文本

      // 创建一个临时隐藏的元素来模拟右键菜单
      const copyButton = document.createElement('button');
      copyButton.textContent = '复制';
      copyButton.addEventListener('click', () => {
        navigator.clipboard.writeText(this.copyText); // 使用navigator.clipboard API复制文本
        copyButton.style.display = 'none'; // 隐藏菜单
      });
      document.body.appendChild(copyButton);

      e.preventDefault(); // 阻止浏览器默认的右键行为
    },
  },
};

这个例子展示了如何使用Vue的`methods`来绑定事件处理，以及通过JavaScript的`window.getSelection()`获取选中的文本，`navigator.clipboard`API来执行复制。