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