本期介紹一個非常常用的前端插件 Clipboard.js，Clipboard.js 實現(xiàn)了純 JavaScript （無 Flash）的瀏覽器內(nèi)容復(fù)制到系統(tǒng)剪貼板的功能。

1.clipboard.js介紹

clipboard.js 現(xiàn)代化的拷貝文字，不依賴 flash, 不依賴其他框架，gzip 壓縮后只有 3kb 大小.

拷貝文字不應(yīng)當(dāng)是一件困難的事. 不需要過多繁雜的配置或者下載很多腳本文件. 最重要的，它不應(yīng)該依賴flash或者其他框架，應(yīng)該保持簡潔

這就是創(chuàng)造clipboard.js的原因和目的

2.clipboard.js的使用

兩種安裝方式

1. 通過npm工具安裝

npm install clipboard --save

2. CDN引入

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

使用

使用很簡單

1. 先引入clipboard.js

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

2. 設(shè)置復(fù)制剪貼的內(nèi)容

從另一個元素復(fù)制內(nèi)容。你可以給目標(biāo)元素添加一個 data-clipboard-target 屬性來實現(xiàn)這個功能

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

你還可以定義一個 data-clipboard-action 屬性來指明你想要復(fù)制還是剪切內(nèi)容

<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

復(fù)制當(dāng)前的內(nèi)容，需要給目標(biāo)元素設(shè)置一個data-clipboard-text 屬性即可

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

3. 事件

如果你想要展示一些用戶反饋，或者在用戶復(fù)制/剪切后獲取已經(jīng)選擇的文字，這里有個示例供你參考。

我們通過觸發(fā)自定義事件，比如success 和 error 讓你可以設(shè)置監(jiān)聽并實現(xiàn)自定義邏輯

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

3.其他用法

如果你不想修改 HTML，提供了一個非常方面的命令式的 API 給你使用。你需要做的就是聲明一個函數(shù)，做一些處理，并返回一個值。

例如, 你希望動態(tài)設(shè)置target, 你需要返回一個node節(jié)點.

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

如果你希望動態(tài)設(shè)置text, 你需要返回字符串。

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

如果在 Bootstrap 模態(tài)框（Modals）中使用，或是在其他修改焦點的類庫中使用，你會希望將獲得焦點的元素設(shè)置為 container屬性的值。

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

同樣地，如果你使用單頁應(yīng)用，你可能想要更加精確地管理 DOM 的生命周期。你可以清理事件以及創(chuàng)建的對象。

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

感謝閱讀，后面會不斷分享自己工作中用到的開源庫，大家一起交流學(xué)習(xí)