自用素材（二） 点击按钮实现一键复制页面制定文本（React示例）

一、操作Dom实现方式

制定文本如下所示,使用antDesign组件库配合开发

<p id='onregCopyClose'>这是需要复制的文本</p>

编写一个button

<Button onClick={this.copyWrite()}>点击复制</Button>

绑定的点击事件代码如下所示

onregCopyClose = () => {
    const copyD = document.getElementById("copyTxt");
    const range = document.createRange()
    window.getSelection().removeAllRanges();          //清除光标选中内容
    range.selectNode(copyD);                          //选中需要复制的Dom节点及其子孙节点
    window.getSelection().addRange(range);            //添加range
    const copySuccess = document.execCommand('copy'); //拷贝当前选中内容到剪贴板
    if(copySuccess) {
      window.getSelection().removeAllRanges();
      this.setState({ regVisible: false })
    } else {
      Message.error("复制失败，请重新复制");
    }
}

createRange方法的语法如下所示，其返回值是一个range对象，两个边界点都被设置为文档的开头。

createRange()

二、纯虚拟Dom实现方式

暂时还没有研究出来怎么实现。。。待研发中