第一种 react-copy-to-clipboard
地址:
https://www.npmjs.com/package/react-copy-to-clipboard
安装:
npm install --save react-copy-to-clipboard
引入:
import {CopyToClipboard} from "react-copy-to-clipboard"
使用:
<CopyToClipboard text="http://www.baidu.com"
onCopy={()=>Toast.success('复制成功')}>
<div className="btn">复制链接</div>
</CopyToClipboard>
第二种 copy-to-clipboard
地址:
https://www.npmjs.com/package/clipboard
cdn引入:
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
使用:
<div className="btn" id="btn" data-clipboard-text="http://www.baidu.com">复制链接</div>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
Toast.success('复制成功')
});
以上两种都可以执行回调,比较好
第三种 copy-to-clipboard
地址:
https://www.npmjs.com/package/copy-to-clipboard
安装:
npm install --save copy-to-clipboard
引入:
import copy from "copy-to-clipboard"
使用:
copy('www.baidu.com',{
message:'复制成功'
})
页面一进入就执行 体验不好
以上三种都可以使用cdn或者npm下载的方式引入,每种都有自己的优点,看情况使用。