1. clipboard.js 介绍


clipboard.js 是一个不需要 flash,将文本复制到剪切板的插件,体积很小,非常实用的一款插件。

clipboard.js 开源地址: https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.js

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 属性后需要跟属性选择器

下面是一个简单的使用示例:

11

可以通过 data-clipboard-action 属性指定是 拷贝(copy) 还是 剪切(cut) 操作

22

也可以通过属性复制文本,不需要另一个元素当触发器,可以使用 data-clipboard-text 属性,在后面放上需要复制的文本

33

4. clipboard.js 事件监听


当复制/剪切成功时如果想要给个提示,可以使用下面方法监听其操作

44