每日質量NPM包複製_copy-to-clipboard

1、copy-to-clipboard

官方定義: Simple module exposing copy function

理解: 一個超級簡單的複製功能,而且這種方法適用於經過別的事件觸發複製功能

什麼意思呢？好比:我想設計一個在Select選擇項改變的時候複製該選擇項,這時候通常沒法插入組件(等會會介紹一個react複製組件的npm),這時候用copy-to-clipboard就很是合適. 固然爲了簡單而使用也是很是合理的

用法

import copy from 'copy-to-clipboard';
//最簡單用法
copy('你要複製的文本')

就這樣使用就能夠了.確實有點過度簡單了.一般複製成功後須要通知一下用戶,可是這裏又沒有回調函數,該如何實現?

兩種方式解決:

1. 做者考慮得很周到,copy實際上會返回一個布爾值,即複製成功返回true,不然返回false

做者官方定義:copy(text: string, options: object): boolean — tries to copy text to clipboard.

Example:

copy('複製文本') && message.success(`複製成功`)

固然這種作法,是由於個人項目已經有了UI框架,我使用的是框架的API提示

1. 官方推薦使用的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}',
});

2、更多複製功能類npm包

• 《react-copy-to-clipboard》

這個比copy-to-clipboard功能多,可是它是基於React組件開發的,能夠根據具體狀況選擇

• 《copy-button》