实现

比较常用的是插件clipboard.js，相比较而言兼容性高，使用方便

示例

直接引入clipboard.min.js即可，其他都不要

准备一个点击按钮之类的，内容是灵活的，可以动态加载

<button type="button" value="点击内容" class="url">链接</button>

然后绑定该事件，并动态生成复制的内容

var clipboard = new ClipboardJS('.url', {
    text: function (e) {
        var value = $(e).val();
        return value;
    }
});
clipboard.on('success', function (e) {
    msg({code: 0, msg: "复制链接成功"});
});
clipboard.on('error', function (e) {
    msg({code: 1, msg: "复制链接失败"});
});

return的内容就是复制的内容，例如复制代码

// 代码复制
$('pre code').prepend('<button type="button" class="copy">复制</button>')
// 复制插件
var clipboard = new ClipboardJS('.copy', {
  text: function (e) {
    return $(e).parent('code').text().substring(2);
  }
});
clipboard.on('success', function (e) {
  message.success(2000, '复制成功')
});
clipboard.on('error', function (e) {
  message.success(2000, '复制失败')
});

代码复制示例

// 添加代码复制按钮
$('pre code').prepend('<button type="button" class="copy">复制</button>')
// 复制插件
var clipboard = new ClipboardJS('.copy', {
  text: function (e) {
    return $(e).parent('code').text().substring(2);
  }
});
clipboard.on('success', function (e) {
  message.success(2000, '复制成功')
});
clipboard.on('error', function (e) {
  message.success(2000, '复制失败')
});

代码按钮复制样式

/* 复制按钮 */
.article-content pre {
    position: relative;
}

.article-content pre:hover .copy {
    display: block;
}

.copy {
    padding: 3px;
    position: absolute;
    right: 5px;
    top: 5px;
    border: 1px solid #d5d5d5;
    color: #2c3e50;
    background-color: #f7f7f7;
    display: none;
    transition: all .5s;
}

.copy:hover {
    background-color: #f0f0f0;
    color: black;
}