Clipboard.js 复制内容

插件地址

clipboard.js 中文网

安装

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>
相关推荐
渣哥18 小时前
代理选错,性能和功能全翻车!Spring AOP 的默认技术别再搞混
javascript·后端·面试
遇见火星18 小时前
Docker入门:快速部署你的第一个Web应用
前端·docker·容器
WeilinerL18 小时前
泛前端代码覆盖率探索之路
前端·javascript·测试
浮游本尊18 小时前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
-睡到自然醒~18 小时前
[go 面试] 前端请求到后端API的中间件流程解析
前端·中间件·面试
洛卡卡了19 小时前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫19 小时前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman19 小时前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥19 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥19 小时前
Vue2 封装二维码弹窗组件
javascript·vue.js