js實現復制|剪切指定內容到粘貼板--clipboard


這是著名開源項目 clipboard.js 的 README.md,里面講解的更加詳細,有興趣的同學可以了解一下。
項目地址:https://github.com/zenorocha/clipboard.js

 

下面我就簡單記錄一下,我對clipboard.js的小小見解。

安裝:

npm install clipboard --save

安裝完成后,會在項目目錄下的node_modules文件夾下找到clipboard文件夾

注:如果不是vue項目,可以去官網https://clipboardjs.com/下載js,通過<script src='clipboard.js'></script>使用

 

使用:

在需要使用的地方引入import Clipboard from 'clipboard'

 

html部分:

注:給按鈕添加兩個屬性--data-clipboard-target和data-clipboard-action

  data-clipboard-target屬性的值就是能匹配到另一個元素的選擇器;data-clipboard-action屬性來指明你想要復制(copy)還是剪切(cut)內容,默認copy;

  還需要注意的是如果設置cut動作只在 <input> 或 <textarea> 元素起作用。

  如果你不需要從另一個元素來復制內容。你僅需要給目標元素設置一個 data-clipboard-text 屬性就可以了; data-clipboard-text 屬性值為你設置的固定內容

 

js部分:

 

最后,如果你使用單頁應用,你可能想要更加精確地管理 DOM 的生命周期。你可以清理事件以及創建的對象。

clipboard.destroy();


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM