每日質量NPM包復制_copy-to-clipboard
一、copy-to-clipboard
官方定義: Simple module exposing copy function
理解: 一個超級簡單的復制功能,並且這種方法適用於通過別的事件觸發復制功能
什麽意思呢？比如:我想設計一個在Select選擇項改變的時候復制該選擇項,這時候一般無法插入組件(等會會介紹一個react復制組件的npm),這時候用copy-to-clipboard就非常合適. 當然為了簡單而使用也是非常合理的
用法
import copy from ‘copy-to-clipboard‘;
//最簡單用法
copy(‘你要復制的文本‘)就這樣使用就可以了.確實有點過分簡單了.通常復制成功後需要通知一下用戶,但是這裏又沒有回調函數,該如何實現?
兩種方式解決:
- 作者考慮得很周到,
copy實際上會返回一個布爾值,即復制成功返回true,否則返回false
作者官方定義:copy(text: string, options: object): boolean — tries to copy text to clipboard.
Example:
copy(‘復制文本‘) && message.success(`復制成功`)當然這種做法,是因為我的項目已經有了UI框架,我使用的是框架的API提示
- 官方推薦使用的
prompt提示
copy接收兩個參數:debug和message
我們先看一下這兩個參數官方定義
Value | Default | Notes
:--: | :--: | :--:
debug | false | Boolean. Optional. Enable output to console.
message | Copy to clipboard: #{key}, Enter | String. Optional. Prompt message. *
debug: 可選參數.啟動控制臺輸出.
其實我不太清楚這個描述是什麽意思.自動輸出到控制臺?我試了並沒發生這種情況.即使設置為false依然是可以復制的.這裏留個坑
message: 可選參數.提示消息.
copy(‘Text‘, {
message: ‘Copy to clipboard #{key}‘,
});
二、更多復制功能類npm包
- 《react-copy-to-clipboard》
這個比copy-to-clipboard功能多,但是它是基於React組件開發的,可以根據具體情況選擇
- 《copy-button》
每日質量NPM包復制_copy-to-clipboard