vue中实现复制文本的功能

背景：

开发视频网站，在视频播放页面，需要复制视频的链接到剪切板，方便用用户粘贴文本转发
解决方式1：

navigator.clipboard.writeText(‘自定义的文本内容’);
// 问题：在本地测试没有问题，但是发布到线上测试环境，一直报错
// Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')

// 可能原因：
1. 浏览器不支持 navigator.clipboard。
   navigator.clipboard.writeText() 是一种比较新的 API，可能在一些旧版本的浏览器中不被支持。
   
2. HTTPS 环境要求
   navigator.clipboard 只能在安全上下文中工作（即 HTTPS），或者在 localhost 上的开发环境中工	   作。如果你是在 HTTP 协议下运行，会出现 undefined 的情况。
   
   线上测试环境确实是http
   

基于以上问题，考虑一种兼容性更好的写法。想到使用document的原生写法

let textArea = document.createElement("textarea");
    textArea.value = content;
    // 将文本框设置为不可见，避免影响用户体验
    textArea.style.position = "fixed";
    textArea.style.top = "-9999px";
    document.body.appendChild(textArea);

    // 选择文本并复制
    textArea.focus();
    textArea.select();
    const isSuccess = document.execCommand("copy");

    // 移除临时的文本框
    document.body.removeChild(textArea);
    isSuccess && ElMessage.success("复制成功");

虽然使用原生的方法可以解决问题，但是考虑不同的浏览器，决定两个写法结合起来。满足条件的情况下，优先navigator.clipboard.writeText()。

const copy = () => {
  const content = `自定义复制文本的内容`;

  if (navigator.clipboard) {
    navigator.clipboard.writeText(content);
    ElMessage.success("复制成功");
  } else {
    let textArea = document.createElement("textarea");
    textArea.value = content;
    // 将文本框设置为不可见，避免影响用户体验
    textArea.style.position = "fixed";
    textArea.style.top = "-9999px";
    document.body.appendChild(textArea);

    // 选择文本并复制
    textArea.focus();
    textArea.select();
    const isSuccess = document.execCommand("copy");

    // 移除临时的文本框
    document.body.removeChild(textArea);
    isSuccess && ElMessage.success("复制成功");
  }
};

测试，功能正常，又满足了自己的好奇心！！！