`useCopyToClipboard`实现复制到剪贴板功能

上次更新 2025年8月20日星期三 3:16:20 字数 0 字时长 0 分钟

javascript

export function useCopyToClipboard(text) {
  const isDone = ref(false);
  const isMobile =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    );

  function copyToClipboard() {
    // 在移动设备上提示用户手动启用 Clipboard API
    if (isMobile) {
      alert("请在浏览器设置中启用剪贴板访问权限");
      return;
    }

    // 确保在用户交互的情况下使用 Clipboard API
    if (typeof navigator.clipboard.writeText === "function") {
      navigator.clipboard.writeText(text).then(
        () => {
          isDone.value = true;
        },
        (error) => {
          isDone.value = false;
          // 处理 Clipboard API 被禁用的情况
          if (error.name === "NotAllowedError") {
            alert("请确保页面已获得焦点并允许剪贴板访问");
          }
        }
      );
    } else if (typeof document.execCommand === "function") {
      const textArea = document.createElement("textarea");
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        isDone.value = document.execCommand("copy");
      } catch (error) {
        isDone.value = false;
        alert("复制操作失败，请手动复制");
      }
      document.body.removeChild(textArea);
    } else {
      alert("此浏览器不支持复制到剪贴板的功能");
    }
  }

  return { isDone, copyToClipboard };
}

注意

VM141:1 Uncaught (in promise) NotAllowedError: Failed to execute 'writeText' on 'Clipboard': Document is not focused. at <anonymous>:1:21

分析原因：

浏览器安全策略，只有在用户交互的情况下才能使用 Clipboard API
在某些浏览器中，即使是在用户交互的情况下，Clipboard API 也可能被禁用，例如在移动设备上，Clipboard API 可能需要用户手动启用

解决方案：

在用户交互的情况下使用 Clipboard API，例如在点击按钮时使用 Clipboard API
在移动设备上，提示用户手动启用 Clipboard API

useCopyToClipboard实现复制到剪贴板功能 ​

`useCopyToClipboard`实现复制到剪贴板功能