场景:
Vue3复制功能有访问安全策略限制,导致本地有效、生产环境复制无效的问题
解决:
1、代码如下:
const onCopy = () => {
// navigator clipboard 需要https等安全上下文
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard 向剪贴板写文本
return navigator.clipboard.writeText("测试复制文本").then(() => {
ElMessage({
showClose: true,
message: "复制成功!",
type: "success",
});
});
} else {
// 创建text area
let textArea = document.createElement("textarea");
textArea.value = "测试复制文本";
// 使 text area 不在viewport,同时设置不可见
textArea.style.position = "absolute";
textArea.style.opacity = '0';
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
// 执行复制命令并移除文本框
document.execCommand('copy') ? res(null) : rej();
textArea.remove();
ElMessage({
showClose: true,
message: "复制成功!",
type: "success",
});
});
}
};