Vue实现点击图标复制当前文本

最新推荐文章于 2025-02-27 11:10:07 发布

Giser-S

最新推荐文章于 2025-02-27 11:10:07 发布

阅读量431

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/2201_75386737/article/details/142985544

版权

1. 安装插件

在终端 pnpm i vue-clipboard3 安装这个插件

2. 在文件中引入

import clipBoard from "vue-clipboard3";
let { toClipboard } = clipBoard();

3. 定义事件

当前示例是点击图标自动复制文本

4. 点击复制事件

const handleCopy = async () => {
  try {
    await toClipboard(keyFormData.appKey);  //括号内的值是需替换成项目中需要粘贴的文本字段
    ElMessage({
      message: "复制成功",
      type: "success",
    });
  } catch (e) {
    ElMessage({
      message: 复制失败,
      type: "error",
    });
  }
};