vue 点击按钮复制文本功能（同时解决http不安全问题）

问题：

在HTTP并且非localhost域名的环境下，navigator.clipboard API 是不可用的。为了能够在HTTP页面上实现剪贴板功能，你可以使用一些polyfill库或者通过Flash、ActiveX等技术来实现，但这些方法相对复杂且不推荐。

不过，有一个较为简单的替代方案是使用 document.execCommand 方法，虽然它已经被标记为过时，但在大多数现代浏览器中仍然有效。下面是一个简单的示例，展示了如何在HTTP页面上复制文本到剪贴板：

解决方案

在安全的环境下，使用navigator.clipboard API，其他不安全的环境，使用document.execCommand

  async copyText(textToCopy) {
        try {
          // navigator clipboard 需要https等安全上下文
          if (navigator.clipboard && window.isSecureContext) {
            // navigator clipboard 向剪贴板写文本
            navigator.clipboard.writeText(textToCopy);
          } else {
            // 创建一个临时的 textarea 元素
            const tempTextArea = document.createElement('textarea');
            tempTextArea.value = textToCopy;
            document.body.appendChild(tempTextArea);
            // 选择并复制文本
            tempTextArea.select();
            tempTextArea.setSelectionRange(0, 99999); // 适用于移动设备
            try {
              const successful = document.execCommand('copy');
              if (!successful) {
                alert('复制失败。');
              }
            } catch (err) {
              console.error('无法执行复制操作: ', err);
              alert('复制失败。');
            }
            // 移除临时的 textarea 元素
            document.body.removeChild(tempTextArea);
          }
          this.$message.success('复制成功！');
        } catch (err) {
          this.$message.error('复制失败：', err);
        }
      },