Copyright 2018-2023 黑鸟云 版权所有 京ICP备2018062516号-1
1. clipboard.js 介绍
clipboard.js 是一个不需要 flash,将文本复制到剪切板的插件,体积很小,非常实用的一款插件
clipboard.js 开源地址: https://github.com/zenorocha/clipboard.js ,目前已有 32k Star,可见其很受欢迎
2. clipboard.js 安装方式
方式一、通过 npm 使用
将 clipboard.js 安装为运行时依赖
npm install clipboard --save
方式二、通过 script 引入
在 clipboard.js 仓库中的 dist 文件夹中下载 clipboard.min.js,或通过第三方 CDN 引入即可
<script src="dist/clipboard.min.js"></script>
3. clipboard.js 基本使用
首先需要通过传递 DOM 选择器来实例化它,选择器可以是 html 元素,也可以是 html 元素列表
用一个元素当触发器来复制另一个元素的文本,data-clipboard-target
属性后需要跟属性选择器
下面是一个简单的使用示例:
<script src="./dist/clipboard.min.js"></script>
<input type="hidden" value="liang" id="foo">
<button class="btn" data-clipboard-target="#foo">复制</button>
<script>
new ClipboardJS('.btn');
</script>
可以通过 data-clipboard-action
属性指定是 拷贝(copy) 还是 剪切(cut) 操作
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="cut">复制</button>
也可以通过属性复制文本,不需要另一个元素当触发器,可以使用 data-clipboard-text
属性,在后面放上需要复制的文本
<button class="btn" data-clipboard-text="hello vue">复制</button>
4. clipboard.js 事件监听
当复制/剪切成功时如果想要给个提示,可以使用下面方法监听其操作
const clipboard = new ClipboardJS('.btn');
clipboard.on('success', function (e) {
// action: copy|cut
// text: 复制的文本
// trigger: 点击的dom元素
const { action, text, trigger } = e
console.info('Action:', action);
console.info('Text:', text);
console.info('Trigger:', trigger);
// 取消选中
e.clearSelection();
});