clipboard.js实现文本复制

用clipboard.js实现文本复制

HTML

  render() {
    return (
      <div>
        {/* 这边是要被复制的内容 */}
        <div ref={(el) => this.code = el}>{data.code}</div>
        {/* 复制按钮 */}
        <button
          ref={el => (this.copyBtn = el)}
          className="button-defaul"
        >
          复制
        </button>
      </div>
    );
  }

JS

  componentDidMount(){
    // 引入clipboard，并且初始化实例
    require(['clipboard'], Clipboard => {
      this.cellClipboard = new Clipboard(this.copyBtn, {
        text: this.getCellClipboardValue // 返回的复制的值
      });
    });
  }

  /**
   * 复制方法
   * @memberof App
   * @return   string  返回要复制的内容(这边演示的是文本是string类型)
   */
  getCellClipboardValue = () => {
    const codeDom = this.code;
    const cellValue = codeDom.innerHTML;
    if (!cellValue) {
      alert('没有可复制的内容');
      return '';
    }
    alert(`已复制到剪切板  ${cellValue}`);
    return cellValue;
  }

清除绑定事件：

  componentWillUnmount() {
    this.cellClipboard.destroy(); // 事件清理
  }

备注：我暂时只试了下文本的，图片的话，我用下面的代码试了下：

<div id="draw-img">
   <img src="//cdn2.jianshu.io/assets/web/web-note-ad-1-c2e1746859dbf03abe49248893c9bea4.png" alt="//cdn2.jianshu.io/assets/web/web-note-ad-1-c2e1746859dbf03abe49248893c9bea4.png"/>
</div>

require(['clipboard'], Clipboard => {
   this.cellClipboard = new Clipboard(this.copyBtn, {
    target: () => document.querySelector('#draw-img')
   });
});

然后这样我点击复制的话，只能复制img的alt属性的值。