使用clipboard.js實現複製功能
阿新 • • 發佈:2019-01-03
最近在開發中,使用原生js複製時,發現在360 7.1的低版本中無法實現程式碼的複製,
隨後便網上找了外掛實現複製功能,檢驗後,發現在低版本也支援
demo:
<input id="contents" type="text" value="" style="position: relative;z-index: -9999 ">
<button class="ydCopy" @click="copyUri" data-clipboard-action="copy" data-clipboard-target="#contents">複製連結</button>
id為contents的input輸入框是作為複製的目標物件,button作為點選按鈕,圖中button使用了vue,
js指令碼中
copyUri: function () { /*var e=document.getElementById("contents");//物件是contents e.select(); //選擇物件 (全選) document.execCommand("Copy"); //執行瀏覽器複製命令*/
var clipboard = new ClipboardJS('.ydCopy'); clipboard.on('success', function(e) { common.layer.msg("連結複製成功!"); }); clipboard.on('error', function}(e) { layer.alert('連結複製失敗,請手動複製下載地址:<br/> <span style="color: blue;">' + $('#contents').val() + '</span>', { skin: 'layui-layer-molv' //樣式類名 ,closeBtn: 0 }, function(){ layer.closeAll(); }); });
三行程式碼解決!(引入clipboard.js 檔案)
裡面的demo模組中有具體的例子,簡單且實用