Vue+TypeScript自定义右键菜单复制时选区消失问题求助

这个问题我之前开发时也碰到过！核心原因是：当你点击自定义右键菜单的选项时，菜单元素会获取页面焦点，浏览器默认会自动清除之前的文本选区，这时候再调用window.getSelection().toString()自然就返回空值了。

下面给你两种实用的解决方案，根据你的需求选就行：

方案一：直接保存选中的纯文本（适合大部分场景） #

这种方法最简单，在右键菜单触发的瞬间，把选中的文本存起来，复制时直接用这个保存好的内容。

代码示例（Vue3 + TS） #

<template>
  <!-- 你的自定义右键菜单，假设第三个选项绑定doCopy -->
  <div class="custom-menu" v-if="showMenu">
    <!-- 其他选项 -->
    <div @click="doCopy">复制选中内容</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const showMenu = ref(false);
let selectedText = ''; // 保存选中的文本

// 监听右键菜单事件
const handleContextMenu = (e: MouseEvent) => {
  e.preventDefault(); // 阻止默认右键菜单
  // 立即获取并保存当前选中的文本
  const selection = window.getSelection();
  selectedText = selection?.toString().trim() || '';
  // 定位并显示自定义菜单（这里省略定位逻辑）
  showMenu.value = true;
};

// 复制函数
const doCopy = async () => {
  if (!selectedText) return;
  
  try {
    // 优先使用现代的Clipboard API
    await navigator.clipboard.writeText(selectedText);
    console.log('复制成功！');
  } catch (err) {
    // 降级处理（兼容旧浏览器）
    const tempTextarea = document.createElement('textarea');
    tempTextarea.value = selectedText;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();
    document.execCommand('copy');
    document.body.removeChild(tempTextarea);
    console.log('复制成功（降级方案）！');
  }
  
  showMenu.value = false; // 关闭菜单
};

onMounted(() => {
  document.addEventListener('contextmenu', handleContextMenu);
});

onUnmounted(() => {
  document.removeEventListener('contextmenu', handleContextMenu);
});
</script>

方案二：保存选区Range对象（支持富文本复制） #

如果你需要复制带格式的富文本内容，就需要保存选区的Range对象，复制时恢复选区再执行复制。

代码示例（Vue3 + TS） #

<template>
  <div class="custom-menu" v-if="showMenu">
    <div @click="doCopy">复制富文本内容</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const showMenu = ref(false);
let savedRange: Range | null = null; // 保存选区范围

const handleContextMenu = (e: MouseEvent) => {
  e.preventDefault();
  const selection = window.getSelection();
  // 保存当前选区的Range对象
  if (selection && selection.rangeCount > 0) {
    savedRange = selection.getRangeAt(0);
  } else {
    savedRange = null;
  }
  showMenu.value = true;
};

const doCopy = () => {
  if (!savedRange) return;
  
  const selection = window.getSelection();
  // 恢复之前保存的选区
  selection?.removeAllRanges();
  selection?.addRange(savedRange);
  
  try {
    // 执行富文本复制
    document.execCommand('copy');
    console.log('富文本复制成功！');
  } catch (err) {
    console.error('复制失败:', err);
  }
  
  showMenu.value = false;
  // 可选：复制后清除选区
  // selection?.removeAllRanges();
};

onMounted(() => {
  document.addEventListener('contextmenu', handleContextMenu);
});

onUnmounted(() => {
  document.removeEventListener('contextmenu', handleContextMenu);
});
</script>

关键注意点 #

1. 一定要在contextmenu事件触发时保存内容：这个时机是选区还没被清除的最后时刻，之后点击菜单元素选区就会消失。
2. Clipboard API的权限问题：navigator.clipboard需要在HTTPS环境下使用，本地开发的localhost也没问题，但如果是HTTP环境会报错，所以要做好降级处理。
3. 清理临时元素：如果使用临时textarea的方案，复制完成后一定要从DOM中移除它，避免污染页面。

内容的提问来源于stack exchange，提问作者Robert