navigator.clipboard/ textarea 选择剪切

浏览器提供的 navigator.clipboard API 来复制文本。

如果不支持或者用户没有授权访问剪贴板，代码会回退到使用一个不可见的 textarea 元素来实现复制功能。

// 导入antd的message组件，用于显示操作反馈信息
import { message } from "antd";
import { MouseEvent } from "react";

// 定义一个异步函数copyNow，用于将文本复制到剪贴板
export async function copyNow(text: string) {
  try {
    // 尝试使用navigator.clipboard API复制文本
    await navigator.clipboard.writeText(text);
    // 如果复制成功，显示成功信息
    message.success("已复制到剪贴板");
  } catch (error) {
    // 如果复制失败，使用传统的textarea方法尝试复制
    const textArea = document.createElement("textarea");
    textArea.value = text;
    // 将textarea添加到文档中，使其可操作
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      // 使用document.execCommand方法复制文本
      document.execCommand("copy");
      // 如果复制成功，显示成功信息
      message.success("已复制到剪贴板");
    } catch (error) {
      // 如果复制失败，显示错误信息
      message.error("复制失败，请赋予剪切板权限");
    }
    // 最后从文档中移除textarea
    document.body.removeChild(textArea);
  }
}

// 定义函数selectOrCopy，用于处理复制操作或者判断是否有文本被选中
export function selectOrCopy(content: string) {
  // 获取当前的文本选择对象
  const currentSelection = window.getSelection();

  // 判断当前是否有文本被选中
  if (currentSelection?.type === "Range") {
    return false;
  }

  // 如果没有文本选中，则调用copyNow函数复制内容
  copyNow(content);

  return true;
}

// 定义函数copyToClipboard，用户触发复制到剪贴板的操作
export function copyToClipboard(message: string, e?: MouseEvent<HTMLDivElement>,) {
  // 调用selectOrCopy函数进行复制操作
  if (selectOrCopy(message)) {
    // 如果复制操作被执行，阻止默认的鼠标事件（如点击跳转等）
    if(e) e.preventDefault();
  }
};