Vue3多条数据复制功能，复制内容用逗号拼接

　　　　　　　<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',
  });
};

效果：