文本复制功能

实现文本复制主要有两种方式，在Web开发中，navigator.clipboard 提供了一组API，允许开发者与浏览器的剪贴板进行交互。特别是，navigator.clipboard.writeText 方法允许你将文本内容写入剪贴板。这个方法在HTTP和HTTPS上下文中的行为略有不同，主要涉及到安全性的考虑。

1. 在HTTP上下文中使用navigator.clipboard.writeText： 在非安全上下文（即HTTP）中，大多数现代浏览器限制了对剪贴板的访问，以防止潜在的安全风险。在HTTP页面中，navigator.clipboard.writeText 方法通常是不可用的，因为浏览器不允许非安全上下文的网页对剪贴板进行写操作。这是为了防止恶意网站在用户不知情的情况下窃取或篡改剪贴板中的数据。

2. 在HTTPS上下文中使用navigator.clipboard.writeText： 在安全上下文（即HTTPS）中，navigator.clipboard.writeText 方法通常是可用的，因为HTTPS提供了数据传输过程中的加密、身份验证和数据完整性保护。这意味着在HTTPS页面中，网站可以安全地与剪贴板交互，用户可以通过网站提供的接口复制文本到剪贴板。   注意，尽管navigator.clipboard.writeText 在HTTPS页面中可用，但是某些浏览器可能要求网页在特定的权限下运行，例如，它可能需要通过服务工作线程（Service Worker）来调用，或者用户需要明确地触发复制操作（例如，通过点击一个按钮）。

下面附上两种方式代码：

1、

function copy(content: any) {

  navigator.clipboard

    .writeText(content)

    .then(() => {

      ElMessage('复制成功')

    })

    .catch((error) => {

      console.error('复制文本到剪贴板时发生错误:', error)

    })

}

2、

export function copyText(text?: string) {

  if (!text) return; // 如果文本为空，则不执行复制操作

  try {

    navigator.clipboard.writeText(text).then(() => {

      ElMessage({

        message: "文本已复制到剪切板",

        type: "success",

        duration: 3000,

      }); // 提示用户文本已复制

    });

  } catch (err) {

    const textToCopy = text;

    const textArea = document.createElement("textarea");

    textArea.value = textToCopy;

    document.body.appendChild(textArea);

    textArea.focus();

    textArea.select();

    const successful = document.execCommand("copy"); // 执行复制操作

    document.body.removeChild(textArea);

    const msg = successful

      ? ElMessage({

          message: "文本已复制到剪切板",

          type: "success",

          duration: 3000,

        })

      : console.error("复制失败", err);

  }

}