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()
  }