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;
}