无法让 "clipboard.js" 工作

Question

我无法获取 clipboard.js to work; I think it's a simple "misunderstanding" about how the whole thing works, since I'm not even able to get the most simple example to work properly like in this Fiddle...

我的具体问题是让它工作：

HTML:

<button class="copyButton" 
        id="copyButtonId" 
        data-id="@item.Type" 
        data-clipboard-action="copy" 
        data-clipboard-target="#copy_@item.Type">
</button>

应该复制的div是这样的：

   <div id="copy_@item.Type">
       @item.Type
       Name...: @item.Name
       Address: @item.Address
   </div>`

JS 是：

$(function() {
$(document).on("click", ".copyButton", function() {
    var clipboard = new Clipboard(".copyButton"); 
    clipboard.destroy();
  });
});

我正在进入功能，但没有任何反应。我试过了：

clipboard.copy();

但这只是抛出一个例外...

我可以得到我想要复制的文本

var id= "copy_" + $(this).attr("data-id"); var source = ($("#" + agent).html());

但我应该只能使用 clipboard.js.

来解决这个问题

我找不到任何示例，所以如果有人向我展示一个完整的示例，我会很高兴。我真的很努力去理解，但我可能对整件事想得太多了，让事情变得比实际情况更复杂。我不想要任何变通办法，因为我以前用过它并且认为这是一个很棒的 js 解决方案......如果我能理解它的话:)

感谢每一个正确方向的提示！

Answer 1

确保首先添加正确的库 ;)

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

或您当地的 min.js

我已将您的代码更改为：

<div id="copy">
    @item.Type
    Name...: @item.Name 
    Address: @item.Address
</div>

<button class="copyButton" id="copyButtonId" data-id="@item.Type"
 data-clipboard-action="copy" data-clipboard-target="div#copy">Copy!</button>

和 js:

var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

我现在复制 div。如果它不适合你，请告诉我。

Answer 2

抱歉，我没有时间阅读所有内容，但图书馆 https://www.npmjs.com/package/clipboard 您可以使用

import ClipboardJS from 'clipboard'

然后是new ClipboardJS('.btn')

或检查此 import Clipboard from 'clipboard' 是否特别适合您的解决方案

Answer 3

API 数据使用情况

import Clipboard from 'clipboard';
''''''
''''''
''''''
 var clipboard = new Clipboard('.class_name_of_the_div');
  clipboard.on('success', function (event) {});
  clipboard.on('error', function (evwnt) {});

data-clipboard-text={data.text}

无法让 "clipboard.js" 工作

can't get "clipboard.js" to work

javascript

clipboard

clipboard.js