因为项目需求，用到复制的地方还挺多，有些是纯html页面，有些是vue项目，这里就是总结一下两种方式
使用clipboard
不需要使用框架
首先要引入clipboard
1 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 2 <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
代码部分
1 <body> 2 <div> 3 <span class="kf_num_title">客服微信号：</span> 4 <input type="text" class="kf_num_tel" value="微信客服（12345678）" id="target1" readonly="" /> 5 </div> 6 <button class="kf_num_btn" data-clipboard-action="copy" data-clipboard-target="#target1" id="copy_btn1">复制</button> 7 <script> 8 // 微信复制 9 let targetText1 = $("#target1").text(); // 获取需要复制的内容 10 let clipboard1 = new Clipboard('#copy_btn1'); // 在点击复制按钮上new一个对象 11 clipboard1.on('success', function (e) { // 复制成功时 12 e.clearSelection(); // 清除选中的文字的选择状态 13 alert('复制成功') 14 }); 15 </script> 16 </body>
使用v-clipboard
在vue项目里使用复制效果
1、安装 和 引用
1 // 1.安装： 2 npm install --save v-clipboard 3 // 2.在main.js里引入 4 import Clipboard from 'v-clipboard' 5 Vue.use(Clipboard)
2、使用
1 <template> 2 <div> 4 <div> 5 <div>链接：</div> 6 <div class="short-link">{{regurl}}</div> 7 </div> 8 <div> 9 <button v-clipboard:copy="regurl" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</button> 10 </div> 11 </div> 12 </template> 13 <script> 14 15 export default { 16 name: "Copy", 17 data() { 18 return { 19 regurl: "https://www.cnblogs.com/sevenflower/" 20 }; 21 }, 22 methods: { 23 onCopy() { 24 alert("复制成功"); 25 }, 26 onError() { 27 alert("复制失败"); 28 } 29 } 30 }; 31 </script>