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

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

 

posted @ 2022-05-25 02:08  叶森白  阅读(1234)  评论(0)  编辑  收藏  举报