Clipboard.js 插件简单使用

最近在实现浏览器中复制功能的时候，使用document.execCommand(“Copy”)的复制功能总是失效，后来在查找中找到Clipboard.js这个插件，真的非常实用好用Clipboard.js

1. 简单介绍
   将文本复制到剪贴板不应该复杂。它不需要数十个步骤来配置或数百KB来加载。但最重要的是，它不应该依赖于Flash或任何臃肿的框架。Clipboard.js就能简单解决。

2. clipboard.js的使用

• . 通过npm工具安装
  npm install clipboard --save
• . 引入
  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

3. 简单应用
   使用

### 注意复制使用data-clipboard-target="#foo"这个属性 要复制的另一个标签的id属性为foo
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" /><!--触发器-->
<button class="btn" data-clipboard-target="#foo">
  <img src="assets/clippy.svg" alt="复制到剪贴板" /></按钮>

#### 如果实现剪切需要配置data-clipboard-action="cut" data-clipboard-target="#bar"这两个就可以实现，cut操作适用input和textarea标签
<!--目标-->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!--触发器-->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">切到剪贴板</button>

#### 你甚至不需要另一个元素来复制其内容。您只需在触发元素中包含data-clipboard-text属性
<button class="btn"data-clipboard-text="仅仅因为你能做到并不意味着你应该——剪贴板.js">
复制到剪贴板
</button>

• 实现复制功能

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供您使用。您只需要声明一个函数，做你的事情，然后返回一个值。

例如，如果您想动态设置target。

-----------------------------html-start---------------------------------------
<button class="btn btn-primary copy-input" title="" type="button" id="">复制全部连接</button>
<div class="rows" id="bookrown">copy的内容</div>
-----------------------------html-end-----------------------------------------
-----------------------------JS-----------------------------------------------
	var clipboard = new ClipboardJS('.btn', {
	  target: function () {
	    return document.getElementById('bookrown');
	  },
	});
	clipboard.on('success', function(e) {
	       toastr.success("复制成功", "", {timeOut: 1000});
	   });

   clipboard.on('error', function(e) {
       toastr.success("复制失败", "", {timeOut: 1000});
   });
   ------------------------js-end----------------------------------------------