移动端实现复制文本的三个插件--clipboard

第一种 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下载的方式引入，每种都有自己的优点，看情况使用。