我的微信公众号：知行校园汇，点击查看，欢迎关注
我的其他平台（点击蓝字可访问）：
GitHub｜Gitee｜哔哩哔哩｜语雀｜简书｜微信小程序｜知行达摩院
1. 什么是clipboard.js？
在clipboard.js官网（网址：/）上，它是这么介绍的：
A modern approach to copy text to clipboard
No Flash. No frameworks. Just 3kb gzipped
简而言之，就是现代化的文本复制工具，不依赖Flash，不不赖框架，压缩后仅3kb大小。
总之，使用该脚本工具，可以轻松实现文本复制。
2. 哪里下载？
在官网就提供了下载链接。
可以使用npm工具安装：
npm install clipboard --save
或者直接下载压缩包，链接：/zenorocha/clipboard.js/archive/master.zip
3. 使用
使用的时候，只需要使用script命令，引入该文件即可：
<script src="dist/clipboard.min.js"></script>
4. 使用方法概述
4.1 基本的使用方法
首先给input，或者textarea等，甚至于div元素，设置id，以及value值或者默认值；
然后设置点击按钮input或者button，通过data-clipboard-action和data-clipboard-target属性，绑定事件；
最后在js中实例化clipboard。
如下示例，将给出完整的基本示例，详细过程请见注释：
<!-- 该代码可直接创建HTML文件运行 --><html lang="zh-CN"><head><meta charset="UTF-8" /><title>target-input</title><meta name="viewport" content="width=device-width, initial-scale=1" /></head><body><!-- 1. 定义一些标记 --><!-- 2. 设置按钮 --><!-- 示例1：复制input元素的value值 --> <input id="foo" type="text" value="这是input元素的value值" /><button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button> <!-- 示例2：剪切textarea元素的值 --><textarea id="bar">这里的文本可被复制或者剪切</textarea><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击剪切文字</button><!-- 示例3：复制div元素的值 --><div>这是div元素里的文字</div><button class="btn" data-clipboard-action="copy" data-clipboard-target="div">复制来自div的文字</button><!-- 示例4：复制button自己设置的值 --><button class="btn" data-clipboard-text="这里的文字将被复制">复制自己的文字</button><!-- 3. 引入库文件 --><!-- <script src="../dist/clipboard.min.js"></script> --><script src="/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script><script>//4. 实例化clipboardvar clipboard = new ClipboardJS('.btn');//5. 复制成功的响应事件【按F12控制台可见】clipboard.on('success', function (e) {console.log(e);//打印动作信息（copy或者cut）console.info('Action:', e.action);//打印复制的文本console.info('Text:', e.text);//打印triggerconsole.info('Trigger:', e.trigger);});//6. 复制失败的响应事件clipboard.on('error', function (e) {console.log(e);console.error('Action:', e.action);console.error('Trigger:', e.trigger);});</script></body></html>
当然，在上面这个代码的第2步，data-clipboard-action除了可以为copy，还可以为cut，但是只能对<input>或者<textarea>元素生效。
4.2 高级用法
可以通过返回元素的方式，实现动态设置复制内容：
<!-- 该代码可直接创建HTML文件运行 --><!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>function-target</title><meta name="viewport" content="width=device-width, initial-scale=1" /></head><body><!-- 1. 基本信息定义 --><button class="btn">点击复制</button><div>这里的内容将被复制</div><!-- 2. 引入库文件 --><!-- <script src="../dist/clipboard.min.js"></script> --><script src="/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script><script>//3. 实例化clipboardvar clipboard = new ClipboardJS('.btn', {target: function () {//获取文档中第一个 <div> 元素：return document.querySelector('div');//返回文档中id为copy-btn的元素//document.querySelector("#copy-btn");//返回文档中 class="btn" 的第一个元素://document.querySelector(".btn");//返回文档中 class="btn" 的第一个 <p> 元素://document.querySelector("p.btn");//还有更多方法，可自行百度},});//复制成功响应clipboard.on('success', function (e) {console.log(e);});//复制失败响应clipboard.on('error', function (e) {console.log(e);});</script></body></html>
可以通过返回文本的方式，实现动态设置复制内容：
<!-- 该代码可直接创建HTML文件运行 --><!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>function-text</title><meta name="viewport" content="width=device-width, initial-scale=1" /></head><body><!-- 1. 定义基本元素 --><button class="btn">Copy</button><!-- 2. 引入库文件 --><!-- <script src="../dist/clipboard.min.js"></script> --><script src="/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script><script>//3. 实例化clipboardvar clipboard = new ClipboardJS('.btn', {text: function () {return '这里的文本将被复制';},});//复制成功响应clipboard.on('success', function (e) {console.log(e);});//复制失败响应clipboard.on('error', function (e) {console.log(e);});</script></body></html>
5. 复制来自AJAX的数据
那么，问题来了。
有的业务，需要通过客户端点击的事件，通过ajax，访问数据库后，拿取数据，再进行复制。这种方案如何实现呢？
其实有比较简单的方法，直接在上面这个代码的function ()内部，写上ajax响应事件，然后在ajax的success中设置返回文本即可。如下：
//3. 实例化clipboardvar clipboard = new ClipboardJS('.btn', {text: function () {//return '这里的文本将被复制';//$.ajax({url: '请求的链接',type: 'POST',//POST的数据data: {_token: $("input[name='_token']").val(),id: $("input[name='id']").val(),},//异步调用关闭async: false,//请求成功：success: function (result) {//返回成功的文本return result.data;},//请求出错error: function (e) {//弹窗提示alert(e.message)}});},});
当然，还有更好的方式。
下面给出一种比较好的参考方案，是一个通过id请求数据库的一个字段为link（可能为资源分享吧）文本的示例：
//定义复制模块JS代码const pageCtrl = {//发送AJAX请求，生成复制的文本，el是传递数据的_codeGenerator: function (el) {const $el = $(el);$.ajax({url: '请求的URL',type: 'POST',data: {_token: el.data('_token'),id: el.data('id'),},//移步请求一定要关闭（false）async: false, success: function (result) {//可以打印请求后的数据console.log(result.status);//返回成功结果if (result.status === 'success') {$el.data('result', result.data[0].link);}//否则，操作失败，根据具体失败情形提示else {//弹窗提示$.alert(result.msg, '操作失败'); //返回结果不要漏$el.data('result', "");}}});},/* 复制功能*/_clip: function () {const _self = this;const clipboard = new ClipboardJS('.copy-btn', {text: function (el) {//构造参数const $el = $(el);//设置初始值$el.data("_token", $("input[name='_token']").val());$el.data('id', $("input[name='id']").val());//ajax请求并设置要复制的字符串_self._codeGenerator($el);//返回复制结果return $el.data('result');}});//复制成功后的方法clipboard.on('success', function (e) {// console.log(e.text)$.alert('链接：' + e.text + ' 已复制', '复制成功' });//复制失败后的方法 clipboard.on('error', function (e) {console.log(e);$.alert('复制失败，请重试！', '复制失败',)});},//初始化方法init: function () {this._clip();}};$(function () {//初始化pageCtrl.init();})
这个示例需要引入JQ（ajax请求）和weui（弹窗，或者把$.alert(‘A’, ‘B’,)修改为普通弹窗alert(A) ）。
当然，如果业务更复杂，可以根据实际进行扩展。
以上。
