使用 clipboard 插件结合 layui 实现的一键复制按钮

• 引入剪切板插件js
  下载地址： https://github.com/zenorocha/clipboard.js/archive/master.zip

1 <script th:src="@{/static/js/clipboard.min.js}"></script>

• 写一段公用JS

 1 <script>
 2 　　var clipboard;
 3 　　$(function(){
 4 　　　　clipboard = new ClipboardJS('.js-clipboard');
 5 　　　　clipboard.on('success', function(e) {
 6 　　　　　　console.log(e)
 7 　　　　　　layer.msg('复制成功');
 8 　　　　});
 9 
10 　　　　clipboard.on('error', function(e) {
11 　　　　　　console.log(e)
12 　　　　　　layer.msg('复制失败');
13 　　　　});
14 
15 　　});
16 </script>

• 点击某按钮弹出窗口

1 //弹出一个提示层
2 $('#showall').on('click', function(){
3 　　layer.open({
4 　　type: 1,
5 　　area: ['600px', '360px'],
6 　　shadeClose: true, //点击遮罩关闭
7 　　content: '<div style="padding:20px;"><p id="selected" style="margin-bottom: 10px;">'+curFundCodes+'</p><button class="js-clipboard layui-btn layui-btn-normal layui-btn-sm" data-clipboard-target="#selected">复制</button></div>'
8 　　});
9 });

• 在页面中添加按钮

1 //复制 #selected 元素的内容
2 <button id="showall" class="js-clipboard" data-clipboard-target="#selected">复制</button>

或：

1 //复制任意文本
2 <button id="showall" class="js-clipboard" data-clipboard-text="任意文本">复制</button> 

转载：https://blog.csdn.net/IndexMan/article/details/111594325

标签：function,插件,layui,layer,js,clipboard,复制,按钮
来源： https://www.cnblogs.com/leonliuo/p/16307891.html