vue + clipboard的复制粘贴功能

最新推荐文章于 2025-05-21 14:08:39 发布

原创最新推荐文章于 2025-05-21 14:08:39 发布 · 481 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Clipboard #vue复制粘贴

vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍如何使用Clipboard.js库实现网页元素的复制功能。通过npm安装或直接下载压缩包，将Clipboard.js集成到项目中。文章提供了引入库的方法及具体复制功能的实现代码，包括事件监听和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载安装

npm install clipboard --save

或者直接在 https://clipboardjs.com/ 下载压缩包，放在 node_modules 下

引入

import Clipboard from "clipboard";

函数

copy(e, text) {
    const that = this;
    const clipboard = new Clipboard(e.target, { text: () => text });

    clipboard.on("success", e => {
        that.$message({
            type: "success",
            message: "复制成功"
        });

        // 释放内存
        clipboard.off("error");
        clipboard.off("success");
        clipboard.destroy();
    });

    clipboard.on("error", e => {
        that.$message({
            type: "waning",
            message: "不支持自动复制"
        });

        // 释放内存
        clipboard.off("error");
        clipboard.off("success");
        clipboard.destroy();
    });

    clipboard.onClick(e);
}

使用

@click="copy($event,'/pages/product/detail?id='+scope.row.id+'')"