項目需求：為增強用戶體驗感，點擊“復(fù)制”按鈕時，可實現(xiàn)復(fù)制指定的文字或者元素到粘貼板上；

? ? ? ? ? ? ? ? ? ?在input、textarea標簽時可實現(xiàn)剪切功能。

使用插件：clipboard

插件屬性：data-clipboard-text：指定需要復(fù)制的內(nèi)容；

? ? ? ? ? ? ? ? ? data-clipboard-target：指定復(fù)制內(nèi)容的元素；

? ?????????????????data-clipboard-action：指定動作（默認復(fù)制）。值為“copy”時，實現(xiàn)復(fù)制功能；值為“cut”時，實現(xiàn)“剪切”功能。

插件使用步驟：

? ? ? ? 安裝：npm install clipboard --save

? ? ? ? 引入：import?Clipboard?from?'clipboard'

? ? ? ? 初始化創(chuàng)建實例：let?clipboard=new?Clipboard('元素')

? ? ? ? 回調(diào)：

????????????????????成功：clipboard.on('success',function(){});

? ? ? ? ? ? ? ? ? ? 失敗：clipboard.on('error',function(){});

代碼：

npm 安裝命令

安裝成功后可在package.json看見版本號

在需要使用的頁面引入插件

添加復(fù)制屬性、實現(xiàn)復(fù)制方法

定義方法，綁定元素

我的項目只需要復(fù)制文本，所以例子是實現(xiàn)文本的。如果要實現(xiàn)復(fù)制元素更改下屬性即可。

復(fù)制文本和復(fù)制元素的可視化區(qū)別就是：復(fù)制文本時，被復(fù)制的文本不會有任何反應(yīng)；復(fù)制元素時，被復(fù)制元素是選中狀態(tài)。