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

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM