标签：function 插件 layui layer js clipboard 复制 按钮

• 引入剪切板插件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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。