ClipboardJS——开发学习总结1

问题需求描述：

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

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

解决方法：

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

1.使用方式：

npm安装：npm i clipboard --save

CDN安装：<script src="dist/clipboard.min.js"></script>

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

<div id="temp_text">我是需要被复制的文字</div>

<button class="copy_btn" data-clipboard-target="#temp_text">一键复制</button>

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 属性中包含的值需要与另一个元素的选择器相匹配

<div id="temp_text">我是需要被复制的文字</div>

<button class="copy_btn" data-clipboard-target="#temp_text">一键复制</button>

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

<button class="copy_btn" data-clipboard-text="我是被复制的文字">我复制我自己属性里的文字</button>

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

<div id="temp_text">我是需要被复制的文字</div>

<button class="copy_btn" data-clipboard-target="#temp_text" data-clipboard-action="cut">一键剪切</button>