clipboard.js文本复制到剪贴板的现代方法

https://clipboardjs.com/

 

vue复制写法：

html：

<div class="" style="border: 1px solid #ececec; margin-bottom: 15px">
            <pre id="code" style="margin: 0">
    &lt;script&gt;
    var _txsc = _txsc || [];
    (function () {
        var tx = document.createElement("script");
        tx.setAttribute('id', '_txsc');
        tx.src = "https://a.xxx.com/txsc.js?si=[站点ID]";
        var z = document.getElementsByTagName("script")[0];
        z.parentNode.insertBefore(tx, z);
    })();
    &lt;/script&gt;</pre
            >
        </div>
        <div>
            <a-button
                type="primary"
                style="margin-right: 10px"
                @click="handleCopy"
                class="J_clipboardBtn"
                data-clipboard-action="copy"
                data-clipboard-target="#code"
                >一键复制</a-button
            >
            <span style="color: #999; display: inline-block">预埋代码的额外参数请找程序猿确认</span>
        </div>

 

js：

import Clipboard from 'clipboard';

 

// 复制
    const handleCopy = () => {
        let clipboard = new Clipboard('.J_clipboardBtn');
        clipboard.on('success', () => {
            message.success('复制成功');
            // 释放内存
            clipboard.destroy();
        });
        clipboard.on('error', () => {
            // 不支持复制
            message.error('该浏览器不支持自动复制');
            // 释放内存
            clipboard.destroy();
        });
    };

效果图：