因為項目需求，用到復制的地方還挺多，有些是純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>