React 复制到粘贴板 兼容各种浏览器 copy-to-clipboard、原生js、clipboard方案

复制文本，在很多场景能用到。但是网上一大堆，有些有兼容问题，适配以及测试麻烦。

• 方式一：copy-to-clipboard 插件
• 方式二：原生js处理
• 方式三：clipboard 插件

方式一：copy-to-clipboard 插件

 

npm install --save copy-to-clipboard
或
cnpm install --save copy-to-clipboard
或者
yarn add copy-to-clipboard

import React from 'react';
import copy from 'copy-to-clipboard';
import { Toast } from 'antd-mobile'; // 不需要提示 可注释

const Demo = () => {
   // 复制内容
   function copyCot(cot) {
    copy(cot);
    Toast.info('复制成功', 2, '', false); // 不需要提示 可注释
  }

  return (
    <div onClick={() => copyCot('复制内容内容内容内容')}>复制</div>
  )
};

export default Demo;

 

参考:https://blog.csdn.net/weixin_44461275/article/details/123044072

 

其他方案：

JS复制文字到剪切板的极简实现及扩展

https://www.zhangxinxu.com/wordpress/2021/10/js-copy-paste-clipboard/