clipboard.js

[spruceatmc]

clipboard.js

spruce 2022/07/11 js复制插件

clipboard.js 实现了纯JavaScript的浏览器内容复制到系统剪贴板的功能。

1.介绍

将文本复制到剪贴板应该不难。 它不需要数十个步骤来配置或数百 KB 来加载。 但最重要的是，它不应该依赖于 Flash 或任何复杂的框架。

这就是 clipboard.js 存在的原因。

--readme.md

安装方式

①通过npm工具安装

npm install clipboard --save

或者，如果您不资源管理器, 只是 下载一个ZIP file.

2.初始化

①先引入clipboard.js

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

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

new ClipboardJS('.btn');

3.用法

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

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

<!-- 触发器-->
<button class="btn" data-clipboard-target="#foo">
  <img src="copy.png" alt="复制" />
</button>

从另一个元素剪切文本

此外，您可以定义一个属性来指定是否data-clipboard-action要指定内容。copy/cut
如果省略此属性，copy将默认使用。

<!-- 复制目标-->
<textarea id="bar">something</textarea>

<!-- 触发器-->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
  复制
</button>

从属性复制文本

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

<!-- 触发器-->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
  复制
</button>

4.其他

如果你不想修改 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();