clipboard異步複製文本（動態獲取文本）

一、需求描述：

　　點擊「分享」按鈕的時候，發送 ajax 請求得到動態邀請鏈接，成功取得數據後複製到剪貼板 

　　

二、解決重點：

> Clipboard 動態設置文本的使用

> Ajax請求設置爲同步, 以保證請求數據後，才進行下一步，這裏即爲 Clipboard  動態設置文本，即複製

 

三、具體實現代碼：

html 部分， 其中 data-id 只是 ajax 的請求參數

<div class="btn" data-id="123">分享</div>

js 部分

;(function() { var pageCtrl = { /* 邀請地址生成器 */ _codeGenerator: function(el) { $.ajax({ url: '/index.php/Proxy/generateProxyCode', type: 'post', data: { serviceId : el.data('id') }, async: false, //重點，async必定要設置爲false，以保證返回數據後才進行下一步的操做
                success: function(res) { $el.data('url', res.data.shareUrl); } }); }, /* 複製*/ _clip: function() { var _self = this, clipboard = new Clipboard('.btn', { text: function(el) { var $el = $(el); _self._codeGenerator($el); //ajax請求並設置要複製的字符串
                    return $el.data('url'); } }); clipboard.on('success', function(e) { console.log('複製成功，快去分享') }); }, init: function() { this._clip(); } }; $(function() { pageCtrl.init(); }); })(); 

 

clipboard.js 官方說明文檔和下載地址  https://www.npmjs.com/package/clipboard