js、vue2、vue3、uniapp环境下实现复制内容到剪贴板的方式代码

/**
 * 原生JS复制内容到剪贴板
 * @param {string} text - 要复制的文本内容
 * @returns {Promise<boolean>} - 复制成功/失败
 */
function copyToClipboard(text) {
  // 方案1：使用现代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);
  }
}

// 调用示例
document.getElementById('copyBtn').addEventListener('click', () => {
  copyToClipboard('这是要复制的内容');
});

<template>
  <button @click="copyToClipboard('Vue2复制的内容')">复制内容</button>
</template>

<script>
export default {
  methods: {
    copyToClipboard(text) {
      // 复用原生JS核心逻辑，结合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复制的内容')">复制内容</button>
</template>

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

/**
 * Vue3复制到剪贴板
 * @param {string} text - 要复制的文本
 */
const copyToClipboard = async (text) => {
  try {
    // 优先使用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复制的内容')">复制内容</button>
</template>

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

/**
 * UniApp跨端复制到剪贴板
 * @param {string} text - 要复制的文本
 */
const copyToClipboard = (text) => {
  // UniApp提供了统一的跨端API，无需自己写兼容
  uni.setClipboardData({
    data: text,
    success: () => {
      uniShowToast({
        title: '复制成功',
        icon: 'success'
      });
    },
    fail: () => {
      uniShowToast({
        title: '复制失败',
        icon: 'none'
      });
    }
  });
};
</script>

<!-- index.wxml -->
<button bindtap="copyToClipboard">复制内容</button>


// index.js
Page({
  /**
   * 微信小程序复制到剪贴板
   */
  copyToClipboard() {
    const text = '微信小程序复制的内容';
    wx.setClipboardData({
      data: text,
      success: () => {
        wx.showToast({
          title: '复制成功',
          icon: 'success'
        });
      },
      fail: () => {
        wx.showToast({
          title: '复制失败',
          icon: 'none'
        });
      }
    });
  }
});