[WEB] 复制粘贴插件——clipboard.js的使用

clipboard.js

为什么

将文本复制到剪贴板应该不难。它不应该需要几十个步骤来配置或加载数百 KB。但最重要的是，它不应该依赖于 Flash 或任何臃肿的框架。
这就是 clipboard.js 存在的原因。

安装

你可以在 npm 上得到它。

npm install clipboard --save

或者，如果您不喜欢包管理，只需 https://github.com/zenorocha/clipboard.js/archive/master.zip 。

设置

首先，包含位于dist文件夹中的脚本或从 第三方 CDN 提供商 加载它。

<script src="dist/clipboard.min.js"></script>

现在，您需要通过传递 DOM 选择器、HTML 元素或HTML 元素列表来实例化它。

new ClipboardJS('.btn');

在内部，我们需要获取与您的选择器匹配的所有元素，并为每个元素附加事件侦听器。但猜猜怎么了？如果您有数百个匹配项，则此操作会消耗大量内存。

出于这个原因，我们使用事件委托，将多个事件侦听器替换为单个侦听器。毕竟，#perfmatters。

用法

我们正在经历一个声明式的复兴，这就是为什么我们决定利用HTML5 数据属性来提高可用性。

从另一个元素复制文本

一个非常常见的用例是从另一个元素复制内容。您可以通过data-clipboard-target在触发器元素中添加属性来实现。
您在此属性中包含的值需要与另一个元素选择器相匹配。

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

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

从另一个元素剪切文本

此外，您可以定义一个data-clipboard-action属性来指定您是否想要copy或cut内容。

如果省略此属性，copy将默认使用。

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

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

正如您所料，该cut操作仅适用于<input>或<textarea>元素。

从属性复制文本

事实是，您甚至不需要另一个元素来复制其内容。您可以只data-clipboard-text在触发器元素中包含一个属性。

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

活动

在某些情况下，您希望显示一些用户反馈或捕获复制/剪切操作后选择的内容。

这就是为什么我们会触发诸如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);
});

高级用法

如果您不想修改 HTML，可以使用非常方便的命令式 API。你需要做的就是声明一个函数，做你的事情，然后返回一个值。

例如，如果您想动态设置 a target，则需要返回一个 Node.js 。

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

如果您想动态设置 a 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();