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>
相关推荐
Filotimo_15 小时前
2.CSS3.(2).html
前端·css
yinuo16 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip17 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈19 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~19 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技0119 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio19 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫21 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@21 小时前
前端发送请求时,参数的传递格式
前端
L李什么李21 小时前
HTML——使用表格制作简历
前端·javascript·html