react 实现复制copy文本内容

思路:

  • 选中想要复制的元素对象
  • 创建range对象,把选中的元素对象放进去
  • 讲range对象添加到selection对象,执行copy命令

代码:

//按钮绑定事件
<Button onClick={copyOrderNumber} className='order-num-operate'>
  Copy
 </Button>
const copyOrderNumber = () => {
//选中节点
    const copyEle = document.querySelector('.order-number-text')
//创建Range对象(某个区域内连续的内容)
    const range = document.createRange()
//清除页面中已有的selection
    window.getSelection().removeAllRanges()
//选中需要复制的节点
    range.selectNode(copyEle)
//执行选中元素
    window.getSelection().addRange(range)
//执行 copy 操作
    const copyStatus = document.execCommand('Copy')
    // 对成功与否定进行提示
    if (copyStatus) {
      Toast.success('Copy Success', 1)
    } else {
      Toast.fail('Copy Failed', 1)
    }
// 移除选中的元素
    window.getSelection().removeAllRanges()
  }