element的表格中添加复制文字操作

html部分 

<el-table-column prop="mobile" label="手机号" align="center" min-width="140">
        <template slot-scope="scope">
          <div style="font-size: 16px" class="copy_box">
            {{ scope.row.mobile || "-" }}
            <div class="n_copy" @click="copy(scope.row.mobile)">
              <i class="el-icon-document-copy">i>复制
            div>
          div>
        template>
      el-table-column>

js部分 

// 复制
    copy(value) {
      let oInput = document.createElement("input");
      oInput.value = value;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: "复制成功",
        type: "success",
      });
      oInput.remove();
    },

scss部分 

.copy_box {
  position: relative;
  width: auto;
  display: inline-block;
  padding-right: 10px;
  .n_copy {
    position: absolute;
    color: #3a8ee6;
    right: 0;
    font-size: 14px;
    visibility: hidden;
    opacity: 0;
    top: 50%;
    transform: translate(100%, -50%);
    cursor: pointer;
    i {
      padding-right: 3px;
      font-size: 16px;
    }
  }
}
.copy_box:hover .n_copy {
  opacity: 1;
  visibility: visible;
}