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，然后返回要在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和背景色？

1 个答案: