使用已有插件
- 插件github:https://github.com/zenorocha/clipboard.js
- 使用方式
- 引入 clipboard.min.js
// 引入js文件 <script src ="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"> </script>
- 元素设置(我在react的jsx 文件中)
<Button type="primary" data-clipboard-text="复制内容" className="copy" >复制短链</Button>
- js 初始化
const clipboard = new window.ClipboardJS('.copy'); clipboard.on('success', function(e) { alert('复制成功'); });
使用textarea
// 创建文本域元素
const tempTextarea = document.createElement('textarea');
tempTextarea.value = "复制内容";
document.body.appendChild(tempTextarea);
// 设置文本域被选中
tempTextarea.select();
// 执行选中动作
document.execCommand('copy');
复制当前页面已有内容
选中参考:https://www.cnblogs.com/sanqianjin/p/9259033.html
// 获取要选中的元素,创建选中区域
const range = document.createRange();
const referenceNode = document.querySelector('.links-wrap');
const selection = window.getSelection();
// 设置选中
range.selectNodeContents(referenceNode);
selection.removeAllRanges();
selection.addRange(range)
// 执行复制
const result = document.execCommand('copy');
// 取消选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();