clipboardjs用法

Clipboard.js 是一个用于在网页中实现复制粘贴功能的 JavaScript 库。

clipboard.js是一个轻量级的JavaScript库，专门用于处理剪贴板操作，如复制和剪切，以下是关于clipboard.js的详细用法介绍：

1、引入插件：

可以通过npm进行安装：npm install clipboard --save，安装完成后在项目中引入。

也可以通过CDN引入：<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>。

或者本地引入，下载clipboard.min.js文件后通过<script>标签引入。

2、基本使用：

初始化Clipboard.js非常简单，只需选择一个按钮或其他触发元素，并将其绑定到Clipboard实例即可。var clipboard = new Clipboard('.btn');，其中.btn是触发复制操作的元素的CSS选择器。

在HTML中，设置一个按钮并添加data-clipboard-target属性指向要复制的元素。<button class="btn" data-clipboard-target="#copyTarget">复制</button><p id="copyTarget">这是需要复制的文本</p>。

另外还有data-clipboard-action属性，以指定是copy还是cut操作，默认情况下是copy，cut操作只适用于<input>或<textarea>元素。

从属性中复制文本，不需要另一个元素当触发器，可以使用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、其他说明：

通过运行Clipboard.isSupported()检查clipboard.js是否支持，返回true则可以使用。

显示一些用户反馈或捕获在复制/剪切操作后选择的内容、操作、文本、触发元素等。

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

该插件使用的是事件委托的方式来触发，所以大大减少了对DOM的操作。

4、高级使用：

如果你不想修改你的HTML，那么你可以使用一个非常方便的命令API，所有你需要做的是声明一个函数，写下你想要的操作，并返回一个值，下面是一个对不同id的触发器返回不同的值的例子，具体的使用方法请看https://clipboardjs.com。

        <body>
        <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
        <button id='foo_1' class="btn" data-clipboard-target="#foo">
        </button>
        </body>
        <script>
            new Clipboard('.btn', {
                text: function(trigger) {
                    if(trigger.getAttribute('id')=='foo_1'){
                        return 1;
                    }else{
                        return 2;
                    }
                }
            });
        </script>