复制内容到剪贴板
方法一npm地址:/package/copy-to-clipboard
安装插件
npm i --save copy-to-clipboard
使用
#引入插件import copy from 'copy-to-clipboard';if(copy("复制内容")){console.log("复制成功");}else{console.log("复制失败")}
方法二
npm地址:/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 ponent {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="/jquery/3.5.0/jquery.js"></script><script src="/clipboard.js/1.5.12/clipboard.min.js"></script>$(function () {var clipboard = new Clipboard('.copyBtn');clipboard.on('success', function (e) {alert('复制成功');});})
如果觉得《复制内容到剪贴板(复制淘口令)》对你有帮助,请点赞、收藏,并留下你的观点哦!