copy-to-clipboard -- JS原生实现文本复制

解决了什么问题

复制文本内容到剪贴板，并消息提示

使用示例

import copy from 'copy-to-clipboard';

copy('Text');

// Copy with options
copy('Text', {
  debug: true,
  message: 'Press #{key} to copy',
});

提供了哪些功能/方法/函数等？

• 提供了一个对外函数copy，可以通过它来实现文本的复制；

关注列表

复制功能

JS的复制命令 document.execCommand('copy'): 将选中的内容复制到剪贴板中

思路分析

1. 传入选中内容text；

copy(text, options)

2. 新建span元素， 赋值为传入的选中文本text；

 mark = document.createElement("span");
 mark.textContent = text;

3. 将span添加到文档中

  document.body.appendChild(mark);

4. 监听文本复制过程

  var successful = document.execCommand("copy");

5. document.execCommand('copy')复制内容

   mark.addEventListener("copy", function(e) {
      e.stopPropagation();
      if (options.format) {
        e.preventDefault();
        if (typeof e.clipboardData === "undefined") { // IE 11
          debug && console.warn("unable to use e.clipboardData");
          debug && console.warn("trying IE specific stuff");
          window.clipboardData.clearData();
          var format = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting["default"]
          window.clipboardData.setData(format, text);
        } else { // all other browsers
          e.clipboardData.clearData();
          e.clipboardData.setData(options.format, text);
        }
      }
      if (options.onCopy) {
        e.preventDefault();
        options.onCopy(e.clipboardData);
      }
    });

6. 从文档中溢出DOM元素；

 if (mark) {
   document.body.removeChild(mark);
 }

7. copy函数返回 复制是否成功的结果

 if (!successful) {
      throw new Error("copy command was unsuccessful");
 }
 success = true;
 ...
 return sucess;

React进阶

React实现文本复制

• 这个是以上面copy-to-clipboard为基础、应用到react

  import copy from 'copy-to-clipboard';