為什么選擇 clipboard.js

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

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

安裝

npm 安裝:

npm install clipboard --save 

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

配置

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

import ClipboardJS from "clipboard"; 

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

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

然后通過(guò)傳入 DOM 選擇器 或 HTML 元素 或 HTML 元素?cái)?shù)組 創(chuàng)建 Clipboard 實(shí)例。

new ClipboardJS('.btn'); 

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

使用

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

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

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

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

Tooltips

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

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

高級(jí)選項(xiàng)

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

例如，如果需要?jiǎng)討B(tài)設(shè)置 target，可以返回一個(gè) Node 節(jié)點(diǎn)。

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

如果需要?jiǎng)討B(tài)設(shè)置 text，可以返回一個(gè) String 。

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

如果在 Bootstrap 模態(tài)框（Modals）中使用，或是在其他修改焦點(diǎn)的類(lèi)庫(kù)中使用，可以將獲得焦點(diǎn)的元素設(shè)置為 container屬性的值。

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

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

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

Vue3 中嘗試使用 clipboard.js

新建一個(gè) Vue3 項(xiàng)目，安裝 clipboard.js

// 新建 vue 項(xiàng)目 
vue create clipboard 
 
// 安裝 
yarn add clipboard 

簡(jiǎn)單使用剪貼功能

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

<!-- 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 實(shí)例

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

可以看到點(diǎn)擊按鈕剪貼成功！

添加 success 函數(shù)

當(dāng)剪貼成功后，彈出剪貼成功信息，對(duì)上述示例稍作修改，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 測(cè)試內(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 }; 
  } 

彈出框如下： 

打印如下： 

瀏覽器支持