浏览器中复制功能

最新推荐文章于 2024-05-10 21:46:03 发布

避坑记录

最新推荐文章于 2024-05-10 21:46:03 发布

阅读量1k

点赞数 1

分类专栏：错误总结 Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44068262/article/details/128007317

版权

Vue 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

错误总结

7 篇文章 0 订阅

订阅专栏

这篇博客探讨了在前端开发中实现复制链接功能时遇到的一个问题，即代码在本地运行正常，但打包后失效。作者提供了两种解决方法：一是使用浏览器的clipboard API，但该方法在打包后可能失效；二是引入clipboard插件，通过创建clipboard实例来监听复制事件，确保在打包后依然能正常工作。博客还详细展示了如何配置和使用这个插件，以及在Vue项目中如何全局挂载和应用。

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

方法一

shareRoute(content, link) {
      let row = content + `\n` + link; // 要复制的内容
      navigator.clipboard.writeText(row).then(
        (res) => {
          this.$message({
            message: "复制链接成功!",
            type: "success",
            duration: 2000,
          });
        },
        (err) => {
          this.$message({
            message: "复制链接失败!",
            type: "error",
            duration: 2000,
          });
        }
      );
    },

但是上边的代码，存在一个问题，本地使用没问题，但是打包后的代码就失效了！！！

使用插件

npm install clipboard --save

入口文件 main.js 全局挂载一下

import clipboard from 'clipboard'

Vue.prototype.clipboard = clipboard;

<el-button 
    size="mini" 
    type="text" 
    @click="shareRoute" 
    class="tag-copy"
    :data-clipboard-text="row.link"
>复制链接</el-button>

必须写！！！

// 加一个名字

class="tag-copy"

// 要复制的内容

:data-clipboard-text="row.link"

shareRoute() {
      let clipboard = new this.clipboard(".tag-copy");
      clipboard.on("success", (e) => {
        this.$message({
          message: "复制链接成功!",
          type: "success",
          duration: 2000,
        });
        //清除选中
        e.clearSelection();
        //释放内存，以防重复复制
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message({
          message: "复制链接失败!",
          type: "error",
          duration: 2000,
        });
        //清除选中
        e.clearSelection();
        //释放内存，以防重复复制
        clipboard.destroy();
      });
    },