為什么選擇 clipboard.js

將文本復(fù)制到剪貼板不應(yīng)該搞得復(fù)雜，它不應(yīng)該需要幾十個步驟來配置或數(shù)百 KB 來加載，更不應(yīng)該依賴于 Flash 或其他臃腫的框架。

clipboard.js 擺脫了這些限制，就可以實現(xiàn)便捷輕量的操作剪貼板。

安裝

npm 安裝:

npm install clipboard --save 

或者下載壓縮包文件：https://github.com/zenorocha/clipboard.js/archive/master.zip

配置

如果已經(jīng)通過 npm 安裝，則直接 import：

import ClipboardJS from "clipboard"; 

如果不使用 npm 管理，需要通過 script 引入或者通過 第三方CDN 加載。

<script src="dist/clipboard.min.js"></script> 

然后通過傳入 DOM 選擇器 或 HTML 元素 或 HTML 元素數(shù)組 創(chuàng)建 Clipboard 實例。

new ClipboardJS('.btn'); 

一般情況下，對于所有符合條件的元素都需要添加監(jiān)聽事件，但如果符合條件的元素較多，這樣會消耗大量的內(nèi)存。 因此，clipboard.js 使用了 事件代理，用一個監(jiān)聽器替代了全部的監(jiān)聽器，這樣最大程度的保證了性能。

使用

從其他元素中拷貝內(nèi)容

如果需要從其他元素中拷貝內(nèi)容，可以通過在觸發(fā)元素上添加 data-clipboard-target 屬性，屬性值為一個選擇器，選中被拷貝元素。

<!-- Target --> 
<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> 

從其他元素中剪貼內(nèi)容

在觸發(fā)元素中添加 data-clipboard-action 屬性，屬性值可以為 copy 或者 cut，設(shè)置為 cut 即可剪貼內(nèi)容，默認(rèn)為 copy。

<!-- Target --> 
<textarea id="bar">Mussum ipsum cacilds...</textarea> 
 
<!-- Trigger --> 
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> 
    Cut to clipboard 
</button> 

注意： cut 僅在 <input> 或 <textarea> 元素中生效。

從屬性中拷貝內(nèi)容

如果不需要從其他元素中拷貝內(nèi)容，那么可以在觸發(fā)元素上添加 data-clipboard-text 屬性，屬性值為需要拷貝的內(nèi)容。

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

事件處理

如果在拷貝完后需要執(zhí)行其他自定義操作，可以添加 success 或 error 事件。

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); 
}); 

實例展示：進(jìn)入 官網(wǎng)，打開 console 即可。

Tooltips

由于每個應(yīng)用都有不同的設(shè)計，因此 clipboard.js 不提供任何內(nèi)置 css 的 tooltip 解決方案。

如果需要實現(xiàn) tooltip 效果，可以參考官網(wǎng)實現(xiàn)類似效果，網(wǎng)站中使用的是 GitHub's Primer 樣式。

高級選項

如果不想修改 HTML 代碼，也可以使用 API 實現(xiàn)上述效果，只需要在實例中聲明函數(shù)，返回所需值。

例如，如果需要動態(tài)設(shè)置 target，可以返回一個 Node 節(jié)點。

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

如果需要動態(tài)設(shè)置 text，可以返回一個 String 。

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(); 

Vue3 中嘗試使用 clipboard.js

新建一個 Vue3 項目，安裝 clipboard.js

// 新建 vue 項目 
vue create clipboard 
 
// 安裝 
yarn add clipboard 

簡單使用剪貼功能

修改 App.vue，引入ClipboardJS，刪除其他元素，新增測試用元素

<!-- App.vue --> 
<template> 
  <div class="wrapper"> 
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" /> 
 
    <button 
      class="btn" 
      data-clipboard-target="#foo" 
      data-clipboard-action="cut" 
    > 
      Copy to clipboard 
    </button> 
  </div> 
</template> 

在 Vue3 setup 函數(shù)中初始化 clipboard 實例

// 引入 
import ClipboardJS from "clipboard"; 
 
// setup 函數(shù)中實例化 
setup() { 
  new ClipboardJS(".btn"); 
}, 

可以看到點擊按鈕剪貼成功！

添加 success 函數(shù)

當(dāng)剪貼成功后，彈出剪貼成功信息，對上述示例稍作修改，input 中的內(nèi)容采用雙向綁定：

<template> 
  <div class="wrapper"> 
    <input id="foo" :value="content" /> 
 
    <button 
      class="btn" 
      data-clipboard-target="#foo" 
      data-clipboard-action="cut" 
    > 
      Copy to clipboard 
    </button> 
  </div> 
</template> 
 
// setup 函數(shù) 
  setup() { 
    const clipboard = new ClipboardJS(".btn"); 
    const content = ref("clipboard 測試內(nèi)容"); 
    clipboard.on("success", (e) => { 
      alert(`剪貼成功： ${e.text}`); 
      console.info("Action:", e.action); 
      console.info("Text:", e.text); 
      console.info("Trigger:", e.trigger); 
      e.clearSelection(); 
    }); 
    return { content }; 
  } 

彈出框如下： 

打印如下： 

瀏覽器支持