>> 知识广场

记录一个非常实用的一键复制前端插件 Clipboard.js

分类：默认 作者：myerob 标签：记录 一个 一键 复制 前端 插件 Clipboard.js 阅读：544 收藏
导读：
本文记录一个非常实用的前端插件 Clipboard.js，Clipboard.js 实现了纯JS将内容一键复制到系统剪贴板的功能。下面是该插件的使用说明：clipboard.js介绍clipboard…

本文记录一个非常实用的前端插件 Clipboard.js，Clipboard.js 实现了纯JS将内容一键复制到系统剪贴板的功能。下面是该插件的使用说明：

clipboard.js介绍

clipboard.js现代化的拷贝文字，不依赖flash，不依赖其他框架，gzip压缩后只有3kb大小。

「拷贝文字不应当是一件困难的事，不需要过多繁杂的配置或者下载很多脚本文件.最重要的，它不应该依赖flash或者其他框架，应该保持简洁」

「这就是创造clipboard.js的原因和目的」

clipboard.js的使用

1、安装：两种安装方式

（1）通过npm工具安装

npm install clipboard --save

（2）CDN引入

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

或七牛云CDN

<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>

2、使用方法（一）

  1. 先引入clipboard.js见上文所示。
  2. 设置复制剪贴的内容

从另一个元素复制内容。你可以给目标元素添加一个data-clipboard-target属性来实现这个功能

<input id="copy" value="三贝计算网">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#copy">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

你还可以定义一个 data-clipboard-action 属性来指明你想要复制还是剪切内容。

<textarea id="copy">三贝计算网...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#copy">
    Cut to clipboard
</button>

复制当前的内容，需要给目标元素设置一个data-clipboard-text属性即可。

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

3.事件

如果你想要展示一些用户反馈，或者在用户复制/剪切后获取已经选择的文字，这里有个示例供你参考。我们通过触发自定义事件，比如success和error让你可以设置监听并实现自定义逻辑。

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);
});

3、使用方法（二）

如果你不想修改HTML，该插件提供了一个非常方面的命令式的API给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。

例如，你希望动态设置target，你需要返回一个node节点。

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

如果你希望动态设置text, 你需要返回字符串。

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得焦点的元素设置为 container属性的值。

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

 

 

 

相关推荐