Clipboard.js 复制内容

一只大黑洋2025-08-19 10:29

插件地址

安装

javascript 复制代码

npm install clipboard --save

使用示例

javascript 复制代码

<template>
  <div>
    <div class="copyBtn" @click="copyText">复制文本</div >
  </div>
</template>

<script>
// 引入clipboard.js
import ClipboardJS from 'clipboard';

export default {
  data() {
    return {
      textToCopy: '这是要复制的内容！', // 要复制的内容
    };
  },
  methods: {
    copyText() {
      // 创建新的 ClipboardJS 实例并传入按钮元素
      const clipboard = new ClipboardJS('.copyBtn', {
        text: () => this.textToCopy, // 动态获取复制的文本
      });

      // 成功复制后的回调
      clipboard.on('success', (e) => {
        console.log('复制成功:', e.text);
        //e.clearSelection(); // 清除选中的文本
      });

      // 失败时的回调
      clipboard.on('error', (e) => {
        console.error('复制失败:', e);
      });

      // 复制完成后销毁 clipboard.js 实例
      clipboard.on('success', () => {
        clipboard.destroy();
      });
    },
  },
};
</script>