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>

猜你喜欢

转载自blog.csdn.net/Mr_LiuP/article/details/125498720