每日质量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包
这个比copy-to-clipboard功能多,但是它是基于React组件开发的,可以根据具体情况选择
每日质量NPM包复制_copy-to-clipboard的更多相关文章
- 每日质量NPM包事件绑定_bindme(详解React的this)
一.bindme 官方定义: is a helper to bind a list of methods to an object reference 理解: 因为不推荐在render()里构建函数, ...
- 每日质量NPM包模态框_react-modal
一.react-modal 官方定义: Accessible modal dialog component for React.JS 理解: 一个容易使用的React模态框组件 二.用法 有时候我们不 ...
- 每日质量NPM包拖拽文件上传_react-dropzone
一.react-dropzone 官方定义: Simple HTML5-compliant drag'n'drop zone for files built with React.js. 理解: 一个 ...
- 每日质量NPM包-classnames
一.classnames 现在到处都追求效率开发,所谓存在即合理,各种各样的开源包/项目火热,也是因为他们大大解决了之前复杂的逻辑.作为榜上前10的热门包:classnames.还真需要了解了解它才能 ...
- Github 持续化集成 工作流 Npm包自动化发布
Github 持续化集成 工作流 Npm包自动化发布 简介 持续集成指的是,频繁地(一天多次)将代码集成到主干. 它的好处主要有两个: 快速发现错误.每完成一点更新,就集成到主干,可以快速发现错误 ...
- npm包与gem包--在线&离线安装
目录 NPM 在线 离线 GEM 在线 离线 NPM NPM,即为Node的包管理工具,官网为 https://www.npmjs.com/,我们可以在站内搜索所需要的NPM包,了解相关的使用规则 安 ...
- node.js零基础详细教程(3):npm包管理、git github的使用
第三章 建议学习时间4小时 课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑 ...
- 如何自己写一个公用的NPM包
以markdown-clear,创建过程为例,讲解整个NPM包创建和发布流程 1 如何创建一个包 1.1 创建并使用一个工程 在GitHub上新建一个仓库,其名markdown-clear clone ...
- 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包
前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
随机推荐
- 使用github管理Eclipse分布式项目开发
使用github管理Eclipse分布式项目开发 老关我在前面的博文(github管理iOS分布式项目开发)中介绍了github管理iOS分布式开发,今天老关将向大家介绍使用github管 理Ecli ...
- 委托、匿名函数到lambda表达式
在C#2.0之前就有委托了,在2.0之后又引入了匿名方法,C#3.0之后,又引入了Lambda表达式,他们三者之间的顺序是:委托->匿名表达式->Lambda表达式,微软的一步步升级,带给 ...
- python里面的xlrd模块
♦python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 今天就先来说一下xlrd模块: 一.安装xlrd模块 ♦ 到python官网下载 ...
- maven项目启动报错;class path resource [com/ssm/mapping/] cannot be resolved to URL because it does not exist
项目启动报了一堆错误,其实都是class path resource [com/ssm/mapping/] cannot be resolved to URL because it does not ...
- 给web项目整合富文本编辑器
给jsp页面整合富文本编辑器下载——删除多余的组件——加入到项目中——参照案例来完成整合步骤:1. 解压zip文件,将所有文件复制到Tomcat的webapps/kindeditor目录下. 2. 将 ...
- 利用crontab定时备份nginx访问日志(也可以说是定时切分日志)
在我们的工作中,肯定会涉及到分析访问日志. 但是如果访问日志都集中存在于一个文件中,那数据量就太大了,并且也不利于我们进行分析. 所以我们需要对访问日志进行按时间切割. 思路: 我们可以利用linux ...
- How to click on a point on an HTML5 canvas in Python selenium webdriver
https://stackoverflow.com/questions/29624949/how-to-click-on-a-point-on-an-html5-canvas-in-python-se ...
- 利用Python实现多线程聊天功能
#-*- coding:utf-8 -*- from threading import Thread from socket import * #1.实现接收消息 def recvDate(): wh ...
- nlp homework 03
NLP Homework 03 --冯煜博 题目描述 (盒子和球模型)假设有3个盒子,每个盒子里装有红白两种颜色的球,盒子里的红白球有下表列出,初始状态分布. 解答 1. 给出HMM模型 \(\mu= ...
- 【python016--序列】
一.列表,元组和字符串的共同点 --都可以通过索引得到每一个元素 --默认索引值总是从0开始 --可以通过分片的方法得到一个范围内的元素的集合 --有很多共同的操作符(重复操作符,拼接操作符.成员关系 ...