解决在iOS复制失败问题 iOS/Android通用

项目场景：

公众号抽奖 优惠券转赠功能 点击后请求转赠码并自动复制到剪切板
目前已验证公众号网页 h5App可用

问题描述：

使用原生方法 在安卓上可用 iOS失效

// 复制
copy(data) {
	let oInput = document.createElement("input");//创建输入框
	oInput.value = data;//赋值
	document.body.appendChild(oInput);//添加到body
	oInput.select(); // 选择对象;
	document.execCommand("Copy"); // 执行浏览器复制命令
	oInput.remove();//移除
},

---

原因分析：

iOS不支持此解决方案 使用clipboard.js插件

解决方案：

下载 clipboard.js到依赖 博主此时用的yarn 读者也可使用npm

yarn add clipboard

//由于只有一个页面使用 未全局引入 就在使用页面引入

import Clipboard from "clipboard";

HTML部分

<button
	class="copy"
	@click="copyLink()"
>
	复制
</button>

js

copyLink() {
	let clipboard = new Clipboard(".copy", {
		text: () => {
			return this.copy_value;//复制内容
		},
	});
	clipboard.on("success", () => {
		this.close();
		this.$toast.success("复制成功");
	});
	clipboard.on("error", () => {
		this.close();
		this.$toast.success("复制失败");
	});
},

注意事项：

**在调用复制的节点 父级和以上不能有阻止冒泡 会导致复制失效 **