React 中实现复制到剪切板功能

阳光穿透心脏的1/2处 2022-12-29 14:29 400阅读 0赞

React 中实现复制到剪切板功能

  • 前言
  • 最终实现方法
  • 中间踩坑

前言

最近有一个需求是在文章列表中实现一个【复制链接】的功能。如图：

在这里插入图片描述
点击【复制链接】之后，链接将复制到剪切板。可在浏览器中进行粘贴打开。

最终实现方法

最终的实现方法很简单，引一个插件，一行代码搞定。这里演示一个简单的 Demo。

  1. 下载 copy-to-clipboard
    npm i copy-to-clipboard --save

  2. 引入 copy 方法，在点击按钮时调用 copy 方法

    import copy from ‘copy-to-clipboard’;
    function coppyUrl(url){
    copy(url);
    alert(‘复制成功’);
    };
    function App(){
    return

中间踩坑

刚开始在网上找了各种 js 实现复制链接的办法。要么出现浏览器兼容性，要么主要是针对原生 DOM 操作。在此记录一下。

1. 只兼容 IE 浏览器

效果：
在这里插入图片描述
原理：

  1. 使用 window.clipboardData.setData 方法。不过该方法只兼容 IE 浏览器。

    <!DOCTYPE html>





    Document






2. 浏览器自带的方法实现原生 DOM 复制

效果：
在这里插入图片描述
原理：

  1. 使用文本域或者输入框的 input.select() 方法。

  2. 执行浏览器的 document.execCommand("copy") 命令。

    <!DOCTYPE html>





    Document









兼容 Firefox 48.0、Chrome 60.0、IE 8 。

3. 使用 clipboard 插件

效果：
在这里插入图片描述
原理：

  1. 引入 clipboard 插件。
  2. 在点击元素中，使用 data-clipboard-action 指定操作类型（copy or cut）。使用 data-clipboard-target 指定复制的目标元素。

  3. 实例化 ClipboardJS 对象，参数为点击元素的类名或者id名。
    注意：根据 clipboard 插件的版本不同，有的需要实例化 Clipboard 对象。

    <!DOCTYPE html>





    Document











发表评论

表情：
评论列表 （有 0 条评论，400人围观）

还没有评论，来说两句吧...

相关阅读