clipboardjs一个页面多个元素复制不同内容

概述

在写博客主题中代码块的复制时需求就是需要复制，考虑到不想写太多代码，也考虑兼容性，采用流行的复制库clipboard.js。官网看起来没什么问题，但写的时候发现一个页面需要多个元素复制多个内容的话，有的内容因为格式问题，可能会导致data-clipboard-text无法正确的赋值完整的值，可能会被经过转义，因此采用以下介绍的方式。

步骤

html代码

<div class="copy-btn">复制</div>
<textarea style="display: none;">{{value}}</textarea>

js代码

var clipboard = new ClipboardJS(".typography .code-figure .copy-btn", {
    text: function (trigger) {
        // 主要是获取相邻的元素的值进行复制
        return trigger.nextElementSibling.innerHTML;
    },
});
clipboard.on("success", function (e) {
    const el = e.trigger as HTMLDivElement;
    e.clearSelection();
    el.style.color = "green";
    el.innerHTML = "复制成功";
    setTimeout(() => {
        el.style.color = "";
        el.innerHTML = "复制";
    }, 2500);
});

clipboard.on("error", function (e) {
    const el = e.trigger as HTMLDivElement;
    el.style.color = "red";
    el.innerHTML = "复制失败";
    setTimeout(() => {
        el.style.color = "";
        el.innerHTML = "复制";
    }, 2500);
});