每日质量NPM包复制_copy-to-clipboard

Posted 2021-01-11 soyxiaobi

一、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}‘,
});

二、更多复制功能类npm包

• 《react-copy-to-clipboard》

这个比copy-to-clipboard功能多,但是它是基于React组件开发的,可以根据具体情况选择

• 《copy-button》