前端复制粘贴功能

菜鸟小记

已于 2022-07-29 15:33:02 修改

阅读量1.8k

点赞数

分类专栏： React 文章标签：前端 typescript

于 2022-07-29 15:31:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47541876/article/details/126056809

版权

React 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了两种方法实现内容复制：一是自定义的copyToClip函数，通过创建input元素并执行copy命令；二是借助copy-to-clipboard插件，简化操作。适合提升开发者的文本复制功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、封装copy函数

// 复制内容到剪贴板
export const copyToClip = (content: string, tipString = '复制成功') => {
  const input = document.createElement('input');
  input.setAttribute('value', content);
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
  message.success(tipString);
};

引入函数使用：

 onClick={() => {
            copyToClip("你要复制的内容");
         }}

二、插件copy-to-clipboard

yarn add copy-to-clipboard

使用：

import Copy from 'copy-to-clipboard';

<Button
	onClick={() => {
	Copy(pageConfig.link);
	message.success('复制成功');
}}
>
复制链接
</Button>