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
	// 创建一个隐藏的  元素
	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 方法。调用它并传入数据即可，非常简洁。