工作中需要实现这样一个需求：在订单号后边提供一个复制订单号的按钮，使用了 clipboard.js，在这里记录一下使用方法和注意事项。
使用步骤
- 安装依赖。在项目根目录下执行：
npm install clipboard --save
- 在项目入口引入：
import Clipboard from 'clipboard';
- 在页面中使用：
复制输入框中的文本
<!-- Target -->
<input id="copy" value="clipboard.js" />
<!-- Trigger -->
<button class="btn" data-clipboard-target="#copy">复制</button>
剪切输入框中的文本
<!-- Target -->
<textarea id="copy">clipboard.js</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#copy">剪切</button>
直接复制文本
<!-- Trigger -->
<button class="btn" data-clipboard-text="clipboard.js">复制</button>
自定义事件：复制成功/复制失败
const clipboard = new Clipboard('.copy');
clipboard.on('success', function(e) {
// 复制成功
console.log(e);
});
clipboard.on('error', function(e) {
// 复制失败
console.log(e);
});
销毁 Clipboard 对象，常用于单页面应用中管理 DOM 的生命周期
clipboard.destroy();
浏览器兼容
Chrome 42+
Edge 12+
Firefox 41+
IE 9+
Opera 29+
Safari 10+
可以通过 ClipboardJS.isSupported() 来检查是否支持 clipboard.js。
以上。
文档信息
- 本文作者：Ji Chao
- 本文链接：https://fehub.net/2019/03/16/clipboard-js/
- 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）