<div class="person-list">
<div class="person-item">9939939939399399</div>
<div class="person-item">1111111111111111</div>
</div>
<el-icon class="allow-point copy-icon" @click="handleCopy">
<DocumentCopy
/></el-icon>
.person-list {
padding: 10px 24px;
width: 300px;
max-height: 160px;
border-radius: 4px;
border: 1px solid #e6ecf5;
line-height: 1.5;
cursor: pointer;
position: relative;
}
.copy-icon {
&:hover {
color: var(--el-color-primary);
}
}
// 复制
const handleCopy = (val: any) => {
const input = document.createElement('input'); // 创建input对象
const personDiv = document.querySelectorAll('.person-list .person-item'); // 获取需要复制文字的容器
let str = '';
for (let i = 0; i < personDiv.length; i++) {
if (i < personDiv.length - 1) {
str += personDiv[i].innerText + ',';
} else {
str += personDiv[i].innerText;
}
}
input.value = str; // 设置复制内容
document.body.appendChild(input); // 添加临时实例
input.select(); // 选择实例内容
document.execCommand('Copy'); // 执行复制
document.body.removeChild(input); // 删除临时实例
ElMessage({
message: '复制成功',
type: 'success',
customClass: 'copy-el-message',
});
};
效果：
标签：personDiv,const,逗号,复制,str,Vue3,input,document From： https://www.cnblogs.com/rachelch/p/17585326.html