為什么選擇 clipboard.js

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

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

安裝

npm 安裝:

npm install clipboard --save 

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

配置

如果已經通過 npm 安裝，則直接 import：

import ClipboardJS from "clipboard"; 

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

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

然后通過傳入 DOM 選擇器 或 HTML 元素 或 HTML 元素數組 創建 Clipboard 實例。

new ClipboardJS('.btn'); 

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

使用

從其他元素中拷貝內容

如果需要從其他元素中拷貝內容，可以通過在觸發元素上添加 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> 

從其他元素中剪貼內容

在觸發元素中添加 data-clipboard-action 屬性，屬性值可以為 copy 或者 cut，設置為 cut 即可剪貼內容，默認為 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> 元素中生效。

從屬性中拷貝內容

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

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

事件處理

如果在拷貝完后需要執行其他自定義操作，可以添加 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); 
}); 

實例展示：進入 官網，打開 console 即可。

Tooltips

由于每個應用都有不同的設計，因此 clipboard.js 不提供任何內置 css 的 tooltip 解決方案。

如果需要實現 tooltip 效果，可以參考官網實現類似效果，網站中使用的是 GitHub's Primer 樣式。

高級選項

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

例如，如果需要動態設置 target，可以返回一個 Node 節點。

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

如果需要動態設置 text，可以返回一個 String 。

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

如果在 Bootstrap 模態框（Modals）中使用，或是在其他修改焦點的類庫中使用，可以將獲得焦點的元素設置為 container屬性的值。

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

同樣地，單頁面應用中，如果需要更加精確地管理 DOM 的生命周期，可以清理事件以及創建的對象。

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 函數中初始化 clipboard 實例

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

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

添加 success 函數

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

<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 函數 
  setup() { 
    const clipboard = new ClipboardJS(".btn"); 
    const content = ref("clipboard 測試內容"); 
    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 }; 
  } 

彈出框如下： 

 

 

 

 

 

打印如下： 

 

 

瀏覽器支持