/**
 * 原生JS復制內(nèi)容到剪貼板
 * @param {string} text - 要復制的文本內(nèi)容
 * @returns {Promise<boolean>} - 復制成功/失敗
 */
function copyToClipboard(text) {
  // 方案1：使用現(xiàn)代API Clipboard（推薦）
  if (navigator.clipboard && window.isSecureContext) {
    return navigator.clipboard.writeText(text)
      .then(() => {
        alert('復制成功！');
        return true;
      })
      .catch(err => {
        console.error('剪貼板寫入失敗:', err);
        alert('復制失敗，請重試！');
        return false;
      });
  }

  // 方案2：降級方案（兼容老瀏覽器）
  const textArea = document.createElement('textarea');
  textArea.value = text;
  // 隱藏textarea避免頁面閃爍
  textArea.style.position = 'fixed';
  textArea.style.opacity = 0;
  document.body.appendChild(textArea);
  textArea.select();
  
  try {
    const successful = document.execCommand('copy');
    if (successful) {
      alert('復制成功！');
    } else {
      alert('復制失敗，請手動復制！');
    }
    return successful;
  } catch (err) {
    console.error('execCommand復制失敗:', err);
    alert('復制失敗，請重試！');
    return false;
  } finally {
    document.body.removeChild(textArea);
  }
}

// 調(diào)用示例
document.getElementById('copyBtn').addEventListener('click', () => {
  copyToClipboard('這是要復制的內(nèi)容');
});

<template>
  <button @click="copyToClipboard('Vue2復制的內(nèi)容')">復制內(nèi)容</button>
</template>

<script>
export default {
  methods: {
    copyToClipboard(text) {
      // 復用原生JS核心邏輯，結(jié)合Vue的響應式提示
      if (navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(text)
          .then(() => {
            this.$message?.success('復制成功') || alert('復制成功');
          })
          .catch(() => {
            this.$message?.error('復制失敗') || alert('復制失敗');
          });
      }

      // 降級方案
      const textArea = document.createElement('textarea');
      textArea.value = text;
      textArea.style.position = 'fixed';
      textArea.style.opacity = 0;
      document.body.appendChild(textArea);
      textArea.select();

      try {
        const success = document.execCommand('copy');
        this.$message?.[success ? 'success' : 'error']?.(
          success ? '復制成功' : '復制失敗'
        ) || alert(success ? '復制成功' : '復制失敗');
      } catch (err) {
        this.$message?.error('復制失敗') || alert('復制失敗');
      } finally {
        document.body.removeChild(textArea);
      }
    }
  }
};
</script>

<template>
  <button @click="copyToClipboard('Vue3復制的內(nèi)容')">復制內(nèi)容</button>
</template>

<script setup>
import { ElMessage } from 'element-plus'; // 按需引入UI庫提示

/**
 * Vue3復制到剪貼板
 * @param {string} text - 要復制的文本
 */
const copyToClipboard = async (text) => {
  try {
    // 優(yōu)先使用Clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(text);
      ElMessage.success('復制成功');
      return;
    }

    // 降級方案
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.opacity = 0;
    document.body.appendChild(textArea);
    textArea.select();
    const success = document.execCommand('copy');
    
    if (success) {
      ElMessage.success('復制成功');
    } else {
      ElMessage.error('復制失敗，請手動復制');
    }
    document.body.removeChild(textArea);
  } catch (err) {
    ElMessage.error('復制失敗，請重試');
  }
};
</script>

<template>
  <button @click="copyToClipboard('UniApp復制的內(nèi)容')">復制內(nèi)容</button>
</template>

<script setup>
import { uniShowToast } from '@dcloudio/uni-app';

/**
 * UniApp跨端復制到剪貼板
 * @param {string} text - 要復制的文本
 */
const copyToClipboard = (text) => {
  // UniApp提供了統(tǒng)一的跨端API，無需自己寫兼容
  uni.setClipboardData({
    data: text,
    success: () => {
      uniShowToast({
        title: '復制成功',
        icon: 'success'
      });
    },
    fail: () => {
      uniShowToast({
        title: '復制失敗',
        icon: 'none'
      });
    }
  });
};
</script>

<!-- index.wxml -->
<button bindtap="copyToClipboard">復制內(nèi)容</button>


// index.js
Page({
  /**
   * 微信小程序復制到剪貼板
   */
  copyToClipboard() {
    const text = '微信小程序復制的內(nèi)容';
    wx.setClipboardData({
      data: text,
      success: () => {
        wx.showToast({
          title: '復制成功',
          icon: 'success'
        });
      },
      fail: () => {
        wx.showToast({
          title: '復制失敗',
          icon: 'none'
        });
      }
    });
  }
});