Vue2 及多场景的「复制粘贴功能实现」

最新推荐文章于 2025-08-25 09:54:25 发布

夏兮颜☆

最新推荐文章于 2025-08-25 09:54:25 发布

阅读量118

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/m0_69892739/article/details/150385982

前言

应用场景：一键复制链接、ID以及文本片段等，方便手动复制，要复制的内容就会到我们的剪贴板，ctrl v粘贴就可以了
记录📝自己在开发过程中遇到的问题

在原生HTML中的写法

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生HTML复制功能</title>
  </head>
  <body>
    <button onclick="copyText()">复制内容</button>
  </body>
  <script>
    const textToCopy = "这是要复制的内容1111";
    function copyText() {
      // 创建临时input元素
      const tempInput = document.createElement("input");
      tempInput.value = textToCopy;
      document.body.appendChild(tempInput);

      // 选中并复制
      tempInput.select();
      const success = document.execCommand("Copy");

      // 提示结果
      alert(success ? "复制成功" : "复制失败");

      // 清理临时元素
      document.body.removeChild(tempInput);
    }
  </script>
</html>

在Vue2中的写法

其实同理是一样的，不管在什么框架中，直接拿来改改就可以直接用
举例：

<el-button @click="handleCopy('复制数据测试一下xxxx')">复制测试</el-button>
handleCopy(val) {
   copyValue(val);
},
        
export function copyValue(val) {
    // 创建一个 Input标签
    const oInput = document.createElement('input');
    oInput.value = val;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象;
    // 执行浏览器复制命令
    // / 复制命令会将当前选中的内容复制到剪切板中
    // / 如这里构建的 Input标签
    document.execCommand('Copy');
    Message({
        message: '复制成功',
        type: 'success'
    });
    // /复制成功后再将构造的标签 移除
    oInput.remove();
}