经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中。其实这个功能实现起来也不难。
(有关原生clipboardData对象调用剪切版的方法,这里不做介绍,因为这个原生对象仅在IE上面生效)
1.下载使用
npm i clipboard -S
2.将clipboard引入到页面上
<script src="../dist/clipboard.min.js"></script>
3.创建一个clipboard对象将参数传递到clipboard框架中
// 创建
var copy = new ClipboardJS('.btn', { //这里传的是选择器!
// 这里传的事件对象是触发的元素
text: function (e) {
let val = document.getElementById('copyText').innerHTML;
// 这里返回的是复制到粘贴版的内容
return val
}
});
把这个对象赋值给copy是为了下面监听clipboard的成功状态
4.监听clipboard的成功状态,判断是否复制到剪切版上
copy.on("success", () => {
alert("复制成功")
})
copy.on('error', () => {
alert("复制错误")
})
5.End(下班啦~回家收衣服了)