vue2 项目中使用clipboard复制插件

最新推荐文章于 2024-05-14 16:48:08 发布

小影_8978

最新推荐文章于 2024-05-14 16:48:08 发布

阅读量380

点赞数 2

文章标签： javascript 前端

本文链接：https://blog.csdn.net/shadow_yi_0416/article/details/136746148

版权

本文介绍了如何在网页中使用npminstallclipboard库，通过点击按钮触发复制功能，将指定的代码内容复制到剪贴板。开发人员展示了如何在HTML和JavaScript中集成这个功能，以及处理复制成功的回调操作。

摘要由CSDN通过智能技术生成

需求，点击页面中的某一个按钮，复制文字。

npm install clipboard --save

在组件中使用

import Clipboard from 'clipboard'

html中的按钮

 <div ref="main" class="main">
    <button @click="copy">copy</button>
</div>

js的代码

.main容器，可以是任何页面上的容器

copy(code) {
      let clipboard = new Clipboard(".main", {
        text() {
          // console.log(trigger);
          //返回字符串
          return code;
        },
      });
      // 复制成功
      clipboard.on("success", () => {
        this.Message('You have successfully copied the code. Please paste in game to redeem.')
        clipboard.destroy();
      });
      
    },