clipboard異步復制文本（動態獲取文本）

1、需求描述：

　　點擊“分享”按鈕的時候，發送 ajax 請求獲得動態邀請連接，成功取得數據后復制到剪貼板 

　　

2、解決重點：

> Clipboard 動態設置文本的使用

> Ajax請求設置為同步, 以保證請求數據后，才進行下一步，這里即為 Clipboard  動態設置文本，即復制

 

3、具體實現代碼：

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