Clipboard复制插件

<script src=\"https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js\"></script>

npm i -S clipboard 

import ClipboardJS from \"clipboard\";

<div id = \"foo\"> 我被data - clipboard - target复制了 </div>
<a
  class=\"btn\"
  href=\"javascript:\"
  data-clipboard-target=\"#foo\"
  rel=\"noopener noreferrer\"
>
  从\"foo\"复制文本
</a>

<button class = \"btn\" data-clipboard-text = \"我复制这个属性\"></button>

   //初始化 clipboard 对象
    var clipboard = new ClipboardJS('.btn');

    //成功
    clipboard.on('success', (e) => {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        //清除文本选中状态
        e.clearSelection();
    });

    //失败
    clipboard.on('error', (e) => {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling  ||  document.getElementById('name');
    }
});

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

  data() {
   //复制实例
   clipboard: \"\"
  },
  mounted() {
        //初始化 clipboard 对象
        this.clipboard = new ClipboardJS(\".btn\");
  },
  methods: {
        copyurl() {
            //成功
            this.clipboard.on(\"success\", e => {
                this.$message({
                    message: \"链接复制成功\",
                    type: \"success\"
                });

                //清除文本选中状态
                e.clearSelection();
                this.clipboard.destroy();
                this.clipboard = new ClipboardJS(\".btn\");
            });

            //失败
            this.clipboard.on(\"error\", e => {
                this.$message.error(\"链接复制失败\");
            });
        },
  },
 destroyed() {
        // 销毁Clipboard实例，避免在其它页面或组件中实例化Clipboard后造成再次监听，产生重复回调
        this.clipboard.destroy();
 }