如何动态使用 Clipboard.js 和背景颜色？

Question

我有一个按钮：

<button class="badge" style="background-color: #ff3333;" data-clipboard-target="#badge">RED</button>

我想复制使用 Clipboard.js 的颜色。我知道我可以使用 data-clipboard-target 手动执行此操作，但我希望使用 their sample code:

之类的东西动态触发事件

new ClipboardJS('.btn', {
text: function(trigger) {
    return trigger.getAttribute('aria-label');
}};

我尝试使用了大约 100 种变体：

 new ClipboardJS(".badge", {
  text: function(trigger) {
    return $(trigger).closest(".badge").element.style.backgroundColor(); 
  }
});

但我不断收到错误消息：Uncaught TypeError: Cannot read property 'style' of undefined。

我意识到我可以只使用 data-clipboard-target 并手动执行此操作，但我希望弄清楚为什么目标被关闭。谢谢

Answer 1

您必须设置 data-clipboard-text，然后 return 您要在 text function 中复制的文本。您也可以使用 trigger.style.backgroundColor 来获取背景颜色。

new ClipboardJS(".badge", {
  text: function(trigger) {
    var result = trigger.style.backgroundColor
    return console.log(result) || result
  }
});

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="badge" style="background-color: #ff3333;" data-clipboard-text="">RED</button>

如何动态使用 Clipboard.js 和背景颜色？

How do I use Clipboard.js dynamically with background color?

javascript

clipboard

jquery