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