美文网首页
使用clipboard库实现点击复制

使用clipboard库实现点击复制

作者: 猫晓封浪 | 来源:发表于2018-11-22 10:01 被阅读0次

踩坑原因:不细心,导致引入实例出错。

clipboard.js 是 github 上的开源项目。

Modern copy to clipboard. No Flash. Just 3kb gzipped.

现代化的“复制到剪切板”插件。不包含 Flash。gzip 压缩后仅 3kb。
github源码
中文翻译版

基本使用流程:

  1. 使用 npm 安装 npm install clipboard --save 或者直接下载压缩包,提取 js文件 使用。
  2. 引入 js 文件,或者使用 CDN 引入。并且通过传入选择器来实例化对象,如:new ClipboardJS('.btn'); 注意:千万不要忘记写JS,否则会报错没有该实例
  3. 使用:
  • 从另一个元素复制文本
    改方法是通过给目标元素添加 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);
});

相关文章

网友评论

      本文标题:使用clipboard库实现点击复制

      本文链接:https://www.haomeiwen.com/subject/vgukqqtx.html