這是著名開源項目 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();