uniapp中全局封装一个跨组件的复制粘贴方法

// 将 handCopy 函数挂载到 Vue 的原型上
// 这样，在任何 Vue 组件中都可以通过 this.handCopy(...) 的方式调用
Vue.prototype.handCopy = (val, title, error) => {// 1. 参数校验// 检查要复制的内容 val 是否为空if (!val) {// 如果为空，则显示一个错误提示uni.showToast({title: error || '无效的内容', // 提示文字，优先使用传入的 error，否则使用默认值icon: 'none' // 提示框图标，'none' 表示不显示图标});return false; // 终止函数执行}// 2. H5 平台实现 (网页端)// #ifdef H5 是 uni-app 的条件编译指令，表示只有在编译到 H5 平台时，才会包含这段代码//#ifdef H5// 创建一个隐藏的 <input> 元素var input = document.createElement('input');// 设置样式，使其绝对定位到屏幕外，不可见且不影响布局input.style = 'position:absolute;left: 0;top: -9999px; opacity: 0;';input.readOnly = 'readonly'; // 设置为只读，防止移动端软键盘弹出input.value = val; // 将需要复制的内容赋值给 input 元素// 将这个 input 元素添加到页面的 body 中document.body.appendChild(input);// 选中 input 元素中的所有文本input.select();// （可选但推荐）对于移动设备，精确设置选择范围input.setSelectionRange(0, input.value.length);// 执行浏览器的复制命令document.execCommand('Copy');// 复制完成后，从页面中移除这个临时的 input 元素document.body.removeChild(input);// 显示复制成功的提示uni.showToast({title: title || '内容已复制', // 提示文字，优先使用传入的 title，否则使用默认值icon: 'none'});//#endif // H5 平台代码结束// 3. 小程序/APP 平台实现// #ifdef MP || APP-PLUS 表示在编译到 小程序(MP) 或 App(APP-PLUS) 平台时，包含这段代码//#ifdef MP || APP-PLUS// 调用 uni-app 提供的统一 API uni.setClipboardData 来设置剪贴板内容uni.setClipboardData({data: val.toString(), // 要复制的数据，确保是字符串类型success() { // 复制成功后的回调函数uni.showToast({title: title || '内容已复制',icon: 'none'});},// 注意：这里可以考虑增加一个 fail 回调来处理复制失败的情况// fail() {//     uni.showToast({ title: '复制失败', icon: 'none' });// }});//#endif // 小程序/APP 平台代码结束
}

1. 挂载到 Vue.prototype：

   • Vue.prototype.handCopy = ... 这行代码使得 handCopy 函数成为了所有 Vue 实例的一个全局方法。这意味着你不需要在每个组件里都 import 或重新定义它，直接在任何组件的方法中使用 this.handCopy('要复制的内容') 即可，非常方便。

2. 参数设计：

   • val (必需): 要复制的核心内容。
   • title (可选): 复制成功时的提示信息，提供了灵活性。
   • error (可选): 内容为空时的错误提示，同样提供了灵活性。
   • 使用 || 操作符来提供默认值，这是 JavaScript 中常见的做法。

3. 条件编译 (#ifdef)：

   • 这是 uni-app 的核心特性之一。它告诉编译器，#ifdef H5 和 #endif 之间的代码块只在目标平台为 H5 时才会被编译打包。
   • 同理，#ifdef MP || APP-PLUS 之间的代码块只在目标平台为小程序或 App 时才会被编译。
   • 这样做的好处是：
     • 代码清晰：将不同平台的实现逻辑分离开。
     • 避免错误：防止在小程序环境中执行 document.createElement 这样的 DOM 操作（小程序没有 document 对象），反之亦然。

4. 平台差异化实现：

   • H5 平台：利用了标准的 Web API。由于浏览器安全策略，通常不能直接复制任意字符串到剪贴板。最通用的 “hack” 方法就是创建一个不可见的输入框，将要复制的内容放进去，然后模拟用户的 “选中” 和 “复制” 操作。
   • 小程序 / App 平台：uni-app 封装了各平台的原生 API，提供了统一的 uni.setClipboardData 方法。调用它并传入数据即可，非常简洁。