1. 程式人生 > >使用clipboard.js實現複製功能

使用clipboard.js實現複製功能

最近在開發中,使用原生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模組中有具體的例子,簡單且實用