clipboard
现代复制到剪贴板。无闪光。只有 3kb 的 gzip 压缩。
安装
npm install clipboard --save
第三方cdn提供商
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
使用
data-clipboard-target="#foo" //从其他元素复制文本data-clipboard-action="cut" // 从其他元素剪切或者复制文本 copy, cut只适用于 input textarea标签
代码展示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button style="background-color: red;" class="btn" data-clipboard-target="#foo" data-clipboard-action="copy">你是最棒的实施肯222定会觉得可能</button><button id="foo">我是小胖哦</button><script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script><script>let btn = document.querySelector('.btn');btn.addEventListener('click', function () {let clipboard = new ClipboardJS('.btn');clipboard.on('success', function (e) {console.info('Action:', e.action);console.info('Text:', e.text);console.info('Trigger:', e.trigger);e.clearSelection();});});</script>
</body></html>成功展示
复制导航栏url
let clipboard = new ClipboardJS('#copy',{text:function(){return window.location.href}})clipboard.on('success',function(e){clipboard.destroy()alert('复制成功')})clipboard.on('error',function(e){clipboard.destroy()alert('复制失败')})
