ClipboardJS——开发学习总结1

问题需求描述：

由于是公司内部app，无法在app内复制、甚至截图，涉及安全隐私。

app内嵌H5页面，通过使用复制按钮，实现文本复制！

解决方法：

ClipboardJS，一款将文本复制到剪贴板的js插件，不使用flash，最小仅3k

1.使用方式：

npm安装：npm i clipboard --save

CDN安装：

2.创建clipboard.js实例，通过传递 DOM 选择器、HTML 元素或 HTML 元素列表创建

我是需要被复制的文字

一键复制

var clipboard = new Clipboard('.copy_btn');

clipboard.on('success', function(e) {

        console.info('Action:', e.action);

        console.info('Text:', e.text);

        console.info('Trigger:', e.trigger);

        e.clearSelection();

});

clipboard.on('error', function(e) {

        console.error('Action:', e.action);

        console.error('Trigger:', e.trigger);

});

3. 其他属性说明

 data-clipboard-target：触发器元素的 data-clipboard-target 属性中包含的值需要与另一个元素的选择器相匹配

我是需要被复制的文字

一键复制

data-clipboard-text：不一定非要从另一个元素复制其内容。 也可以只在触发器元素中包含一个 data-clipboard-text 属性并复制该属性的内容

我复制我自己属性里的文字

data-clipboard-action：指定是要复制还是剪切内容，值为 cut 表示执行剪切操作。如果省略此属性，默认情况下将使用复制

我是需要被复制的文字

一键剪切