主要解决过程是通义千问+测试。这篇文章写的也不错,本文补充几种情况 juejin.cn/post/718686...
核心提示
- navigator.clipboard.writeText 安卓不支持 且需要 https,不建议用该方法
- 苹果设备,点击事件触发时必须立即往剪切板里写入内容,若点击后要ajax请求后再往剪切板里写会失败!!!
建议处理流程
- 若写入剪切板前要调用接口。设置一个变量
unsupportCopy: myPlatform.includes('mac') || myPlatform.includes('ios')
判断不支持直接写入剪切板的设备 - 点击复制按钮时,若设备支持点击事件和写入剪切板直接有时差,就调用下面的方法写入剪切板。若不支持,就弹出弹框,里面展示内容,然后提供一个按钮,点击复制
实现方案
navigator.clipboard (不推荐)
js
copyStrToClipboard(str, successCb) {
navigator.clipboard
.writeText(str)
.then(() => {
this.$message.success('复制成功!')
successCb && successCb()
})
.catch((err) => {
this.$message.error(err)
})
}
document.execCommand('copy')
js
export function copyToClipboard(text, successCB) {
const textarea = document.createElement('textarea');
textarea.value = text; // 直接赋值包含换行符的文本
textarea.style.position = 'fixed'; // 避免滚动问题
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
Message.success('复制成功!')
successCB && successCB()
} else {
Message.error('本设备不支持复制!')
}
} catch (err) {
Message.error('复制失败' + err)
}
document.body.removeChild(textarea); // 清理
}
注意,此处复制内容的容器是textarea 而不是 document.createElement('input'),若用的是input,若文本里含 \n 是复制不出来换行的