首页 > 网络编程 > JavaScript > javascript技巧 > js、vue2、vue3、uniapp复制内容到剪贴板

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

2026-03-05 10:15:59 作者：云游云记

这篇文章主要介绍了js、vue2、vue3、uniapp环境下实现复制内容到剪贴板的方式,原生JavaScript适用于跨端,Vue3和UniApp提供更好的开发体验,微信小程序则专注于微信生态,每种方法都有其优缺点,需要的朋友可以参考下

一、主流环境实现方法

1. 原生 JavaScript

兼容主流浏览器的实现代码：

/**
 * 原生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('这是要复制的内容');
});

核心逻辑：优先使用现代的 navigator.clipboard API（需安全上下文），降级用 document.execCommand('copy') + 临时 textarea。
前置条件：navigator.clipboard 仅在 HTTPS 或 localhost 下可用。

2. Vue2

选项式 API 实现代码：

<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>

核心逻辑：复用原生 JS 复制逻辑，结合 Vue2 全局提示（如 Element UI 的 this.$message）优化用户体验。

3. Vue3

组合式 API + Setup 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>

核心逻辑：使用 async/await 简化异步逻辑，结合 Vue3 生态的 UI 库提示，更贴合 Vue3 编码风格。

4. UniApp

跨端兼容实现代码：

<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>

核心逻辑：直接使用 UniApp 封装的 uni.setClipboardData API，自动适配小程序、App、H5 等端，无需手动处理兼容。

5. 微信小程序

原生小程序语法实现代码：

<!-- 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'
        });
      }
    });
  }
});

核心逻辑：使用微信小程序原生 API wx.setClipboardData，仅能在微信环境运行，无需处理 DOM 相关逻辑。

二、各实现方式优缺点对比

技术环境	实现方式核心	优点	缺点
原生 JS	Clipboard API/execCommand	无框架依赖、灵活性高、纯前端实现	需手动处理兼容、HTTPS 限制、需操作 DOM
Vue2	封装原生 JS 逻辑	贴合 Vue2 语法、可结合 UI 提示	仍需处理浏览器兼容、依赖 DOM 环境
Vue3	异步封装原生 JS 逻辑	代码更简洁、支持 TS、异步清晰	仍需处理浏览器兼容、依赖 DOM 环境
UniApp	uni.setClipboardData	跨端兼容、无需手动写兼容、无 DOM	依赖 UniApp 框架、性能略低于原生
微信小程序	wx.setClipboardData	原生支持、无 DOM 操作、适配微信	仅能在微信环境运行、无跨端能力

三、汇总总结

核心关键点

跨端优先选 UniApp

UniApp 的 uni.setClipboardData 是最优解，一套代码适配所有端，无需处理兼容问题。

纯 Web 端选 Vue3 / 原生 JS

Vue3 实现更简洁，原生 JS 适合无框架场景，优先用 navigator.clipboard（HTTPS），降级用 execCommand。

微信专属选小程序原生 API

wx.setClipboardData 适配微信生态，性能和体验最优，无需处理 DOM 相关问题。

选型建议

多端应用（小程序 / H5 / App）：直接用 UniApp 的 uni.setClipboardData。
纯 Web 端：Vue 项目（Vue2/Vue3）封装原生 JS 逻辑，纯静态页面用原生 JS 兼容方案。
微信专属小程序：用微信原生 wx.setClipboardData。

通用注意事项

原生 JS 的 navigator.clipboard 仅在 HTTPS 或 localhost 环境可用。
所有环境的复制功能都需用户主动触发（如点击按钮），无法自动复制（浏览器/小程序安全限制）。
UniApp 和微信小程序的 API 是异步的，需通过 success/fail 回调处理结果，不可同步获取复制状态。

到此这篇关于js、vue2、vue3、uniapp环境下实现复制内容到剪贴板的方式代码的文章就介绍到这了,更多相关js、vue2、vue3、uniapp复制内容到剪贴板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！