复制内容到剪贴板（复制淘口令）

复制内容到剪贴板

• 方法一
  npm地址：https://www.npmjs.com/package/copy-to-clipboard

安装插件

npm i --save copy-to-clipboard

使用

#引入插件
import copy from 'copy-to-clipboard';
if(copy("复制内容")){
       console.log("复制成功");
}else{
       console.log("复制失败")
}

方法二

npm地址：https://www.npmjs.com/package/react-copy-to-clipboard

• 安装插件

npm install --save react-copy-to-clipboard

• 使用

import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';
 
class App extends React.Component {
  state = {
    value: '',
    copied: false,
  };
 
  render() {
    return (
      <div>
        <input value={this.state.value}
          onChange={({target: {value}}) => this.setState({value, copied: false})} />
 
        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <span>Copy to clipboard with span</span>
        </CopyToClipboard>
 
        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <button>Copy to clipboard with button</button>
        </CopyToClipboard>
 
        {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
      </div>
    );
  }
}
 
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

方法三（JQ版）

<script src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

$(function () {
        var clipboard = new Clipboard('.copyBtn');
        clipboard.on('success', function (e) {
            alert('复制成功');
        });
    })