copy-to-clipboard 的拷贝使用

最新推荐文章于 2024-05-15 10:07:43 发布

前端小hi

最新推荐文章于 2024-05-15 10:07:43 发布

阅读量1.2k

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/qq_55194329/article/details/128702040

版权

第一步安装

npm i --save copy-to-clipboard

第二步配置

//引入插件
import copy from 'copy-to-clipboard'
//引入usstate hook
import { useState } from 'react'

//创建函数进行封装
const useCopy = () => {
//声明状态
  const [ isCopied, setIsCopied ] = useState(false)
//返回函数
  function copyTextToClipboard(text: string) {
//拷贝
    copy(text)
//设置成功状态
    setIsCopied(true)
//三秒后返回状态
    setTimeout(() => setIsCopied(false), 3000)
  }
//返回状态 和函数

  return { copyTextToClipboard, isCopied }
}

export default useCopy

第三步引用使用

import useCopy from '../../hooks/useCopyText'

//初始化

const { copyTextToClipboard, isCopied } = useCopy()

//使用提示框

<ToastMessage text={t('referral.copied')} isValid isVisible={isCopied} />

//点击调用事件

<button onClick={()=>copyTextToClipboard(itemcontent['order_num']) }>