Vue实现点击复制文本内容(原生JS实现)

项目场景：

实现点击订单编号复制内容

问题描述

这里我是在element 的table组件里实现的步骤，仅供参考，实际上实现思路都大同小异

首先在需要点击的地方，添加点击事件

<div class="orderNumber" @click="copyOrderNumber(scope.row.orderNumber)">
  <span>{{ scope.row.orderNumber }}</span>
  <i class="el-icon-document-copy copyIcon"></i>
</div>

定义我们的点击事件

解决方案：

// 复制订单编号

copyOrderNumber(OrderNumber) {
    //调用copy函数
   this.copy(OrderNumber);
},

 copy(data) {
      // 存储传递过来的数据
      let OrderNumber = data;
      // 创建一个input 元素
      // createElement() 方法通过指定名称创建一个元素
      let newInput = document.createElement("input");
      // 讲存储的数据赋值给input的value值
      newInput.value = OrderNumber;
      // appendChild() 方法向节点添加最后一个子节点。
      document.body.appendChild(newInput);
      // 选中input元素中的文本
      // select() 方法用于选择该元素中的文本。
      newInput.select();
      // 执行浏览器复制命令
      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
      document.execCommand("Copy");
      // 清空输入框
      newInput.remove();
      // 下面是element的弹窗 不需要的自行删除就好
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },