clipboard.js  现代化的拷贝文字 

 clipboard.js 不依赖flash, 不依赖其他框架，gzip压缩后只有3kb大小

文档地址 ：http://www.clipboardjs.cn/

安装

通过npm工具安装

js框架下 npm 命令

npm install clipboard --save

ts框架下 npm 命令

npm install --save @types/clipboard

CDN

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

引入

import ClipboardJS  from "clipboard";

或

const ClipboardJS  = require("clipboard");

设置

需要传入一个 DOM选择器, HTML 元素，ClipboardJS 会对你传入的所有元素绑定事件

const copy = new ClipboardJS("#copyButton");

使用

复制文本

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

这个属性的值就是能匹配到另一个元素的选择器。

<span id="foo">复制的文本</span>

<button data-clipboard-target="#foo">复制</button>

从属性复制文本不需要从另一个元素来复制内容，仅需给目标元素设置一个data-clipboard-text 属性即可。

<button data-clipboard-text="复制的文本" id="copyButton">复制</button>

剪切文本

从另一个元素剪切文本，可以定义一个 data-clipboard-action 属性来指明想要复制还是剪切内容。

如果省略这个属性，则默认为复制。

<input type="text" value="复制的文本" id="foo" />

<button data-clipboard-action="cut" data-clipboard-target="#foo">复制</button>

注意：剪切操作只在<input> 或者 <textarea> 元素上生效

事件

想要展示一些用户反馈，或者在用户复制/剪切后获取已经选择的文字，通过触发自定义事件，比如success 和 error 可以设置监听并实现自定义逻辑.

let clipboard = new Clipboard("#copyButton", {

    text: (trigger: any) => {

      console.log("当前节点", trigger);

      console.log("下一个同级节点", trigger.nextElementSibling);

      console.log("上一个同级节点", trigger.previousElementSibling);

      return trigger.previousElementSibling.innerHTML;

    }

  });

  clipboard.on("success", () => {

    alert("复制成功");

    clipboard.destroy(); // 释放内存

  });

  clipboard.on("error", () => {

    alert("复制失败");

    clipboard.destroy();

  });