踩坑原因:不细心,导致引入实例出错。
clipboard.js 是 github 上的开源项目。
Modern copy to clipboard. No Flash. Just 3kb gzipped.
现代化的“复制到剪切板”插件。不包含 Flash。gzip 压缩后仅 3kb。
github源码
中文翻译版
基本使用流程:
- 使用
npm
安装npm install clipboard --save
或者直接下载压缩包,提取 js文件 使用。 - 引入 js 文件,或者使用 CDN 引入。并且通过传入选择器来实例化对象,如:
new ClipboardJS('.btn');
注意:千万不要忘记写JS,否则会报错没有该实例 - 使用:
- 从另一个元素复制文本
改方法是通过给目标元素添加id
,然后在点击元素添加data-clipboard-target
实现点击复制 - 从另一个元素剪切文本
在上一方法的基础上可以选择复制copy
或者剪切cut
通过data-clipboard-action
属性,其默认值为复制copy
- 从属性复制文本
可以不从另一元素获取文本值,直接通过该点击元素的属性获取,通过在该元素设置data-clipboard-text
属性
用户点击后事件反馈
通过 success
或者 error
返回成功或者失败方法
var clipboard = new Clipboard('.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);
});
网友评论