copy功能

最新推荐文章于 2024-11-01 15:10:26 发布

陌豫

最新推荐文章于 2024-11-01 15:10:26 发布

阅读量205

点赞数

文章标签： react.js typescript

本文链接：https://blog.csdn.net/qq_49833949/article/details/124693027

版权

const copy = (ref) => {
    const range = document.createRange();
    window.getSelection()?.removeAllRanges();   //清楚页面已有的selection
    range.selectNode(ref);  //选中需要复制的node
    window.getSelection()?.addRange(range); //执行选中元素
    const successful = document.execCommand("copy");    //执行copy
    window.getSelection()?.removeAllRanges();   //移除选中元素
 }

<Text className="text-size">
    Business Owner: <Text ref={tipRef_1}>TENCENTID1</Text>
    <Bubble
        arrowPointAtCenter
        placement="top"
        content={tipText}
        style={{ position: "fixed", right: 25, top: 100 }}
    >
        <Icon type="copy"
            style={{ cursor: "pointer" }}
            onClick={() => {
                setTipText("Copy sucess");
                copy(tipRef_1.current);
            }}
            onMouseLeave={() => {
                setTipText("Copy");
            }}
        />
    </Bubble>
</Text>

其中ref是元素节点，vue、react可使用ref，JS原生使用DOM对象获取，自行修改。

最后通过Copy Icon 点击调用此方法就好了。