使用 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