一、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接收两个参数:debugmessage

我们先看一下这两个参数官方定义

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组件开发的,可以根据具体情况选择

每日质量NPM包复制_copy-to-clipboard的更多相关文章

  1. 每日质量NPM包事件绑定_bindme(详解React的this)

    一.bindme 官方定义: is a helper to bind a list of methods to an object reference 理解: 因为不推荐在render()里构建函数, ...

  2. 每日质量NPM包模态框_react-modal

    一.react-modal 官方定义: Accessible modal dialog component for React.JS 理解: 一个容易使用的React模态框组件 二.用法 有时候我们不 ...

  3. 每日质量NPM包拖拽文件上传_react-dropzone

    一.react-dropzone 官方定义: Simple HTML5-compliant drag'n'drop zone for files built with React.js. 理解: 一个 ...

  4. 每日质量NPM包-classnames

    一.classnames 现在到处都追求效率开发,所谓存在即合理,各种各样的开源包/项目火热,也是因为他们大大解决了之前复杂的逻辑.作为榜上前10的热门包:classnames.还真需要了解了解它才能 ...

  5. Github 持续化集成 工作流 Npm包自动化发布

    Github 持续化集成 工作流 Npm包自动化发布 简介   持续集成指的是,频繁地(一天多次)将代码集成到主干. 它的好处主要有两个: 快速发现错误.每完成一点更新,就集成到主干,可以快速发现错误 ...

  6. npm包与gem包--在线&离线安装

    目录 NPM 在线 离线 GEM 在线 离线 NPM NPM,即为Node的包管理工具,官网为 https://www.npmjs.com/,我们可以在站内搜索所需要的NPM包,了解相关的使用规则 安 ...

  7. node.js零基础详细教程(3):npm包管理、git github的使用

    第三章  建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑 ...

  8. 如何自己写一个公用的NPM包

    以markdown-clear,创建过程为例,讲解整个NPM包创建和发布流程 1 如何创建一个包 1.1 创建并使用一个工程 在GitHub上新建一个仓库,其名markdown-clear clone ...

  9. 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

随机推荐

  1. python GIL 全局锁,多核cpu下的多线程性能究竟如何?

    python GIL 全局锁,多核cpu下的多线程性能究竟如何?GIL全称Global Interpreter Lock GIL是什么? 首先需要明确的一点是GIL并不是Python的特性,它是在实现 ...

  2. freemark、jsp&css

    **************************************************************freemark相关**************************** ...

  3. nodejs核心技术

    一.知识结构: http模块:配置简单 的web服务,npm/cnpm工具 express框架:express中间件进行服务配置:路由:请求处理: DB服务:学习使用mysql关系型数据库: web接 ...

  4. python requests库的简单使用

    requests是python的一个HTTP客户端库,跟urllib,urllib2类似,但比urllib,urllib2更加使用简单. 1. requests库的安装在你的终端中运行pip安装命令即 ...

  5. 在vim编辑器python实现tab补全功能

    在vim编辑器中实现python tab补全插件有Pydiction,Pydiction可以实现下面python代码的自动补全: 1. 简单python关键词补全 2. python函数补全带括号 3 ...

  6. Python框架----cookie和session

    一.cookie和session的介绍 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cookie ...

  7. java-工厂方法模式学习笔记

    1.工厂模式分三种 1.1 普通工厂模式:就是建立一个工厂类,对实现了同一接口的一些类进行实例创建,如下图所示: 就以老司机开车(土豪开奔驰,宝马:屌丝骑自行车)为例,说明一下普通工厂模式: 首先,创 ...

  8. 大数据自学3-Windows客户端DbVisualizer/SQuirreL配置连接hive

    前面已经学习了将数据从Sql Server导入到Hive DB,并在Hue的Web界面可以查询,接下来是配置客户端工具直接连Hive数据库,常用的有DbVisualizer.SQuirreL SQL ...

  9. tomcat 启动时遇到org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet contained no TLDs

    当发生这样的错误的时候 org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet ...

  10. 在用网站ICP备案主体变更导致网站无法访问问题解决

    关于ICP备案: 备案的目的:是为了防止在网上从事非法的网站经营活动,打击不良互联网信息的传播,如果网站不备案的话,很有可能被查处以后关停.非经营性网站自主备案是不收任何手续费的,所以建议大家可以自行 ...