react 怎么实现拷贝功能
react实现拷贝功能的方法:1、通过“copy-to-clipboard”库实现复制功能;2、使用“react-copy-to-clipboard”库实现复制功能;3、通过“navigator.clipboard.writeText(e)”方法实现复制;4、通过“document.execcommand(“copy”)”方法实现复制;5、通过“copy-js”库实现拷贝功能。
react 怎么实现拷贝功能?
React中实现一键复制——五种办法
- copy-to-clipboard库(推荐)
- react-copy-to-clipboard库(推荐)
- navigator.clipboard.writeText(e)(推荐)
- document.execcommand(“copy”)
- copy-js库
copy-to-clipboard
1、安装方式
// npm安装---这种方式可能会对babel的版本有限制
npm i --save copy-to-clipboard
//cdn引入
<script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>
2、使用方式
import copy from 'copy-to-clipboard';const handleClick = ()=>{
copy('复制的内容');
message.success('复制成功')}<Button onClick={handleClick}>复制</Button>
react-copy-to-clipboard
该方法是基于copy-to-clipboard的,如果在安装copy-to-clipboard的时候,发现和其他部分npm包有版本限制的话,那估计这个也不行,但是也不是不可以试试
1、安装
npm i --save react-copy-to-clipboard
2、用法——这里有个地方要注意,在<CopyToClipboard></CopyToClipboard>
中,只能有一个根元素,并且本人亲试,如果在<CopyToClipboard></CopyToClipboard>
中,一个根元素裹着两个兄弟节点比如div和一个button的话,复制也不会生效,我也不知道为啥,有兴趣的小伙伴可以去看看源码。
import { CopyToClipboard } from 'react-copy-to-clipboard';
<CopyToClipboard text={'复制的内容'}
onCopy={(_, result) => {
if (result) {
message.success('复制成功');
} else {
message.error('复制失败,请稍后再试');
}
}}
>
<Button
type='primary'
icon={<CopyOutlined />}
/>
</CopyToClipboard>
document.execcommand(“copy”)——已被弃用
不过好似有的浏览器还可以使用,具体看文档点我
这个方法我没有使用过,有什么坑我也不清楚。
使用方法
<button style="margin-top: 40px;">一键复制</button>const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const textarea= document.createElement('textarea');
textarea.setAttribute('readonly', 'readonly');
textarea.value = 'xxxxx';
document.body.appendChild(textarea);
textarea.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
alert('复制成功');
}
document.body.removeChild(textarea);
})
copy-js库
这块我只是找到了这个库,也没有使用过,但是我看源码底层也是使用的document.execcommand("copy")
1、安装
// npm包下载npm install copy-js --save// CDN导入<script src="https://cdn.rawgit.com/duyetdev/copy.js/master/dist/copy.min.js"></script>
2、使用
import copy from 'copy-to-clipboard';copy('hello world', function(err) {
if (err) console.log('Some thing went wrong!');
console.log('Copied!');});
navigator.clipboard.writeText(e)
这个方法也有踩坑的地方,开发时间比较短,也没有具体去研究原因
这个方法的参数e,是需要拿到input文本框的value值为复制的节点
但是这个方法可能在一些应用里边的端内浏览器会有限制,在正常浏览器里是可以使用的,但是比如说现在在飞书端内浏览器里边是没有clipboard这个对象的。还是得看场景使用。
1、使用方法
const { Search } = Input;const copyLink = (e: any) => {
navigator.clipboard.writeText(e).then(
() => {
message.success(intl.t('复制成功'));
console.log(e);
},
() => {
message.error(intl.t('复制失败,请稍后再试'));
},
);};
<Search
bordered={false}
value={window.location.href}
enterButton={intl.t('复制链接')}
size='middle'
onSearch={copyLink}
/>
可能还有其他一些方法,暂时没有想到的
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbhhaj
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01