移動端實現複製文本的三個插件--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下載的方式引入，每種都有自己的優點，看情況使用。