原文链接:https://segmentfault.com/a/1190000020651289?utm_source=tag-newest
安装
从npm
安装
npm install clipboard --save
或者,如果您不喜欢包管理,只需下载一个ZIP文件
设置
-
script
引入 三方
CDN
引入
现在需要通过传递一个DOM
选择器、一个HTML
标签或者一组HTML
标签来实例化它
new ClipboardJS('.btn'); //通过类名.btn的元素实例化
在内部,我们需要获取与选择器匹配的所有元素,并为每个元素附加事件监听器。但你猜怎么着?如果有数百个匹配项,则此操作会消耗大量内存。
因此,我们使用事件委托,它将多个事件侦听器替换为一个侦听器。
报错
如出现innerHtml的报错,就把实例化写到定时器里面。
setTimeout(()=>{
new Clipboard(document.getElementById('copyBtn'));
},1000)
使用方法
我们正在经历一个声明性的复兴,这就是为什么我们决定利用HTML5的数据属性来获得更好的可用性
复制
相当普遍的使用场景是从其他元素复制文本。在触发元素上添加 data-clipboard-target
属性,该属性值用来匹配另一个元素选择器。
无敌大帅哥
剪切
另外,也可以定义 data-clipboard-action
属性为 copy/cut
来,明确操作是 复制 / 剪切
如果忽略了这个属性,便默认 复制
正如上例,剪切 cut
的操作只能在 和
标签中起作用,在其他标签中会出现事件正常调用,但是操作是失败的,粘贴板是没有改变的。
通过属性复制文本
我们甚至不必需要其他承载文本的元素,仅通过 在触发元素中 添加 data-clipboard-text
属性 来完成复制
注意:
-
data-clipboard-text
“级别最高”,在data-clipboard-target
等属性存在时,复制内容及相关参数以data-clipboard-text
为准
事件
回调函数: success / error
事件名 | 参数 |
---|---|
success | event.action copy/cut 操作 |
event.text copy/cut 操作文本内容 |
|
event.triger 触发操作的DOM 元素 |
|
error | event.action copy/cut 操作 |
event.triger 触发操作的DOM 元素 |
var 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();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
工具提示
每个应用程序有不同的设计需求,这就是为什么clipboard.js
不包括任何CSS或内置的工具提示解决方案。
您在这个演示站点上看到的工具提示是使用GitHub的Primer构建的。如果你正在寻找相似的外观和感觉,你可能想看看。
高级用法
如果你不想修改你的HTML,有一个非常方便的命令式API供你使用。您所需要做的就是声明一个函数,执行您的操作,然后返回一个值。
例如 如果想动态的设置一个目标元素target
,则需要返回一个节点,即 动态设置点击复制的目标元素
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling || document.getElementById('name');
}
});
如果想动态设置内容文本text
,则返回一个字符串String
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label') || 'default text ';
}
});
在Bootstrap Modals
中或与任何其他更改焦点的库一起使用时,将希望将焦点元素设置为 container
值。
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});
并且,如果在单页应用中使用时,要更精确地管理DOM的生命周期,可以使用以下方法清除创建的事件对象
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
动态生成多个实例
{{row.push_flow}}
复制
handleFlowCopy(id) {
// 根据当前id动态生成不同实例
var streamurl = new Clipboard(document.getElementById('streamurl' + id));
streamurl.on('success', (e) => {
this.$message.success('复制成功')
streamurl.destroy()
});
},
以上方法当点击按钮时才实例化,所以第一次点击复制不成功,第二次后面才成功。处理方法:当请求table数据成功后就实例化一次。
handleGetTableData() {
getData().then(res => {
res.data.map(i => {
new Clipboard(document.getElementById('streamurl' + i.live_id));
})
})
}
浏览器支持
这个库同时依赖于Selection
和execCommand
api。所有浏览器都支持第一个,而以下浏览器支持第二个。
- Chrome 42 +
- Edge12 +
- Firefox 41 +
- IE 9 +
- Opera 29 +
- Safari 10 +
好消息是,如果需要支持旧的浏览器,clipboard.js
可以优雅地降级。你所要做的就是显示一个工具提示“复制!”在调用成功事件时,因为文本已经被选中,所以在调用错误事件时,请按Ctrl+C
进行复制。
你也可以通过运行ClipboardJS.isSupported()
来检查是否支持clipboard.js
,这样你就可以从UI中隐藏复制/剪切按钮。
彩蛋
Chrome 和 Firefox 浏览器扩展:在 GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Mediu 的代码块中 添加一个 "copy to clipboard" 的按钮
作者:Mr_zhang
链接:https://segmentfault.com/a/1190000020651289
来源:SegmentFault 思否
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。