react 项目中涉及到复制功能,逻辑就是用户点击一个复制按钮,将后台拿到的数据放进粘贴板供用户粘贴,感觉用插件还要引入和绑定DOM比较麻烦,就干脆用原生写了,以下为实现方法,注释已经写的比较明白了, 可以直接拿来用:
handleCopyDDL = record =>{
// 获取需要复制的文字
const copyStr = record.ddl_str
// 创建input标签存放需要复制的文字
const oInput = document.createElement('input');
// 把文字放进input中,供复制
oInput.value = copyStr;
document.body.appendChild(oInput);
// 选中创建的input
oInput.select();
// 执行复制方法, 该方法返回bool类型的结果,告诉我们是否复制成功
const copyResult = document.execCommand('copy')
// 操作中完成后 从Dom中删除创建的input
document.body.removeChild(oInput)
// 根据返回的复制结果 给用户不同的提示
if (copyResult) {
message.success('DDL已复制到粘贴板')
} else {
message.error('复制失败')
}
}