clipboard.js是一个用来设置剪切板的库，小巧无依赖，但用法有点诡异，必须依赖一个dom元素。据作者说，由于浏览器相关安全策略的缘故，无法使用下面这种方式来设置剪切板

clipboard.copy('text to copy');

必须要与一个DOM元素相关联，并且需要用户的点击操作才能实现功能（这样看来，浏览器还是挺安全的）

普通使用推荐下面这种用法，这里的text可以动态设置，可以写一个js函数动态返回text

var clipboard = new ClipboardJS('#btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
        // return randomText();
    }
});


clipboard.on("success", function (e) {
    console.log("复制成功");
});

clipboard.on("error", function (e) {
    console.log("复制失败，请手动复制");
});

如果要在bootstrap的modal中使用，上面的代码会无法正常工作，需要在构造函数里多传入一个container，这个container就是这个模态框

var clipboard = new ClipboardJS('#btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    },
    container: document.getElementById('dialog')
});

clipboard.on("success", function (e) {
    console.log("复制成功");
});

clipboard.on("error", function (e) {
    console.log("复制失败，请手动复制");
});

界面里没有button也是可以用的

<span id="wechat_account" data-clipboard-text="aaa">aaa</span>

jquery(document).on('tap', '#wechat_account', function (evt) {
    var clipboard = new ClipboardJS("#wechat_account");
    clipboard.on("success", function (e) {
        mui.toast("微信号复制成功");
    });
    clipboard.on("error", function (e) {
        mui.toast("微信号复制失败，请手动输入微信号");
    });
    $('#wechat_account').trigger('click');
});

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/2844