react 复制文本到剪贴板中

最新推荐文章于 2024-12-09 09:55:01 发布

NanGnos

最新推荐文章于 2024-12-09 09:55:01 发布

阅读量549

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/SongdanDab/article/details/133172310

文章讲述了在表格渲染中如何使用JavaScript的CopyOutlined组件，通过创建虚拟input元素来实现选中文本并复制到剪贴板的功能，以方便用户快速复制指定的modelPath数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

e是传递的数据就是需要复制的文本

渲染表格的时候：

{
      dataIndex: 'modelPath',
      key: 'modelPath',
      title: 'name',
      render(_, item) {
        return (
          <div className="modeHtml">
            <Popover content={item.modelPath}>
              <div className="modePathTitle">{item.modelPath}</div>
            </Popover>

            <CopyOutlined
              onClick={() => {
                copyList(item)
              }}
            />
          </div>
        )
      }
 },

点击复制按钮复制需要的item

const copyList = e => {
    const textToCopy = e.modelPath
    // 创建一个虚拟input元素
    const input = document.createElement('input')
    input.value = textToCopy
    document.body.appendChild(input)
    // 选择输入框的内容
    input.select()
    input.setSelectionRange(0, 99999) // 兼容移动设备
    // 执行复制操作
    document.execCommand('copy')
    // 移除虚拟input元素
    document.body.removeChild(input)
    // 可以显示一条消息或者执行其他操作
    alert('已复制到剪贴板！')
}