关于clipboard.js 的使用，完成文本的复制_clipboard.js 复制文本-CSDN博客

本文链接：https://blog.csdn.net/qq_43654065/article/details/125189563

clipboard.js 是一个轻量级的库，用于方便地实现文本复制功能。它支持原生JS、jQuery和Vue等环境。在使用中可能出现的问题包括：多次点击导致复制功能重复调用，以及Vue中首次点击需要两次才能生效。解决方法是在成功或失败回调中销毁实例，如`clipboard.destroy()`。示例代码展示了如何在不同环境下配置和使用clipboard.js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clipboard.js 主要用来对节点内的文本完成复制。支持原生js的调用

官网：https://clipboardjs.com/
官方js:https://clipboardjs.com/dist/clipboard.min.js

data-clipboard-action	cut	剪切
data-clipboard-action	copy	复制
data-clipboard-target	类名/id名	要复制的节点
data-clipboard-text	文本内容	要复制的文本内容

1. js调用

虽然是用的原生js，但是类名传递依然可以使用“.btn”这种方式，id名同理。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="copy">copy</div>
  <a onclick="getCopy()" class="btn" data-clipboard-target="#copy">button</a>
  <script>
    function getCopy() {
      var clipboard = new ClipboardJS('.btn');

      clipboard.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        //e.clearSelection(); //注释可实现复制成功后，文本获得焦点
        clipboard.destroy()
      });

      clipboard.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        clipboard.destroy()
      });
    }
  </script>
  <script src="./clipboard.min.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>

2. jquery同理

3. vue调用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./vue.global.prod.min.js"></script>

  <title>Document</title>
</head>

<body>
  <div id="app">
    <div id="copy">copy</div>
    <a @click="getCopy()" class="btn" data-clipboard-target="#copy">button</a>
  </div>
  <script src="./clipboard.min.js" type="text/javascript" charset="utf-8"></script>
  <script>
    Vue.createApp({
      methods: {
        getCopy() {
          var clipboard = new ClipboardJS('.btn');
          clipboard.on('success', function (e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
            //e.clearSelection();
            clipboard.destroy()
          });

          clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
            clipboard.destroy()
          });
        }
      }
    }).mount("#app")
  </script>
</body>

</html>