clipboard.js实现文本复制

最新推荐文章于 2024-02-29 14:20:24 发布

weixin_30500663

最新推荐文章于 2024-02-29 14:20:24 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yxfboke/p/10868286.html

本文详细介绍如何使用clipboard.js库实现在网页上复制文本的功能。通过React组件展示复制按钮及目标文本，利用clipboard.js初始化复制实例，实现点击按钮即可复制指定内容到剪贴板的效果。同时，文章还探讨了复制图片alt属性的局限性。

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

用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>
    );
  }

  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属性的值。

转载于:https://www.cnblogs.com/yxfboke/p/10868286.html