Vue应用中安全可靠地复制文本到剪贴板：解决兼容性与权限问题

<template>
  <div>
    <div id="rgb">{{ RGB }}</div>
    <button @click="copyColor('rgb')">Copy RGB</button>

    <div id="hex">{{ HEX }}</div>
    <button @click="copyColor('hex')">Copy HEX</button>

    <div id="hsl">{{ HSL }}</div>
    <button @click="copyColor('hsl')">Copy HSL</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      RGB: 'rgb(255, 0, 0)',
      HEX: '#FF0000',
      HSL: 'hsl(0, 100%, 50%)'
    };
  },
  methods: {
    copyColor(id) {
      const copyText = document.getElementById(id).textContent;
      // 这里的 navigator.clipboard.writeText() 可能会失败
      navigator.clipboard.writeText(copyText)
        .then(() => {
          console.log('文本已复制 (Clipboard API)');
          // 提供用户反馈
        })
        .catch(err => {
          console.error('Clipboard API 复制失败:', err);
          // 在这里需要一个回退方案
        });
    }
  }
};
</script>

<template>
  <div>
    <div id="rgb">{{ RGB }}</div>
    <button @click="copyColor('rgb')">Copy RGB</button>

    <div id="hex">{{ HEX }}</div>
    <button @click="copyColor('hex')">Copy HEX</button>

    <div id="hsl">{{ HSL }}</div>
    <button @click="copyColor('hsl')">Copy HSL</button>

    <p v-if="feedback" :style="{ color: feedbackColor }">{{ feedback }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      RGB: 'rgb(255, 0, 0)',
      HEX: '#FF0000',
      HSL: 'hsl(0, 100%, 50%)',
      feedback: '',
      feedbackColor: 'green'
    };
  },
  methods: {
    // 主复制方法，优先使用现代API，失败时回退
    async copyColor(id) {
      const element = document.getElementById(id);
      if (!element) {
        this.showFeedback(`错误: 找不到ID为 "${id}" 的元素。`, 'red');
        return;
      }
      const textToCopy = element.textContent;

      // 尝试使用现代 Clipboard API
      if (navigator.clipboard && navigator.clipboard.writeText) {
        try {
          await navigator.clipboard.writeText(textToCopy);
          this.showFeedback('文本已成功复制到剪贴板！', 'green');
          return; // 成功则直接返回
        } catch (err) {
          console.warn('使用 Clipboard API 复制失败，尝试回退方案:', err);
          // Clipboard API 失败，继续执行回退方案
        }
      } else {
        console.warn('当前环境不支持 Clipboard API 或未处于安全上下文，使用回退方案。');
      }

      // 回退方案
      this.fallbackCopyToClipboard(textToCopy);
    },

    // 基于 document.execCommand 的回退复制方法
    fallbackCopyToClipboard(text) {
      let textArea = document.createElement("textarea");
      textArea.value = text;
      // 使 textarea 元素不可见且不影响布局
      textArea.style.position = "fixed";
      textArea.style.left = "-999999px";
      textArea.style.top = "-999999px";
      textArea.style.opacity = "0"; // 确保完全不可见
      textArea.style.pointerEvents = "none"; // 阻止鼠标事件
      document.body.appendChild(textArea);

      textArea.focus();
      textArea.select(); // 选中所有文本

      try {
        const successful = document.execCommand('copy');
        if (successful) {
          this.showFeedback('文本已成功复制到剪贴板！(回退方案)', 'green');
        } else {
          this.showFeedback('复制失败，请手动复制。', 'red');
        }
      } catch (err) {
        this.showFeedback(`复制失败: ${err.message}`, 'red');
        console.error('执行 document.execCommand 失败:', err);
      } finally {
        textArea.remove(); // 无论成功失败，都移除临时元素
      }
    },

    // 显示用户反馈信息
    showFeedback(message, color) {
      this.feedback = message;
      this.feedbackColor = color;
      setTimeout(() => {
        this.feedback = '';
      }, 3000); // 3秒后清除反馈信息
    }
  }
};
</script>