一、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. OAuth2.0 知多少(好)

    https://www.cnblogs.com/sheng-jie/p/6564520.html 简书集成的社交登录,大大简化了我们的注册登录流程,真是一号在手上网无忧啊.这看似简单的集成,但背后的技 ...

  2. TCP协议、算法和原理

    TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的过程却能让人有很多收获. 关于TCP这个协议的细节,我还是推荐你 ...

  3. Python笔记 #19# 实现bpnn

    代码编辑&解释工具:Jupyter Notebook 快速入门 形象说明BP神经网络的用法(图片来自推特): Bpnn类最主要的三个方法: initialize方法,用于设定神经网络的层数.各 ...

  4. Docker MySQL5.5镜像

    定制MySQL的镜像有个很大的难题:mysqld启动之前要初始化数据目录,5.5自带有空账号密码需要初始化. Dockerfile FROM centos # 拷贝需要的安装和MySQL初始脚本 CO ...

  5. django图书管理系统实例

    首页,其他页面全部继承首页的上半部分 点击发布图书页面 首页点击书名,跳转到图书信息界面,该界面可删除图书 项目结构 #views.py from django.shortcuts import re ...

  6. spring使用@Value标签读取.properties文件的中文乱码问题的解决

    最近测试某个老系统的时候,启动的时候发@Value注入的中文是乱码,文件使用GBK/UTF-8的时候均会出现乱码问题,但是spring配置文件里面注入的占位符并没有这个问题,bean文件设置了file ...

  7. java不常用但很有用的问题排查工具(持续完善)

    因为用的频率不是很多,老忘掉,每次都要搜下,特记录下备忘. 查看进程的启动jvm选项 [root@iZ23nn1p4mjZ ~]# jinfo -flags 16603Attaching to pro ...

  8. 20165310 NetSec2019 Week5 Exp3 免杀原理与实践

    20165310 NetSec2019 Week5 Exp3 免杀原理与实践 一.免杀原理 杀软是如何检测出恶意代码的 基于特征码的检测:特征码就是一段恶意程序有但是正常程序没有的一段代码,当杀软检测 ...

  9. 【python018--函数参数】

    1.形参和实参 >>> def MyFirstFunction(name):    '函数定义过程中的name是叫形参'    #因为Ta只是一个形式,表示占据一个参数位置    p ...

  10. 【转】java提高篇之理解java的三大特性——多态

    面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...