复制-组件

src/forge/Branch/CloneAddress.js

@@ -1,16 +1,10 @@
 import React, { useState } from 'react';
-import { Dropdown, Menu, Tooltip } from 'antd';
+import { Menu } from 'antd';
 import "./branch.scss";
+import CopyTool from '../Component/CopyTool';
 
 function CloneAddress({http_url , ssh_url , zip_url , tar_url}) {
   const [ key , setKey ] = useState("HTTP");
-  // 点击按钮复制功能
-  function jsCopy(){
-    var e = document.getElementById("copy_rep_content");
-    e.select();
-    document.execCommand("Copy");
-  }
-
   return (
     <div className="downMenu">
       <div style={{padding:"10px 20px 20px 20px",borderBottom:"1px solid #eee"}}>
@@ -20,9 +14,7 @@ function CloneAddress({http_url , ssh_url , zip_url , tar_url}) {
         </Menu>
         <div className="gitAddressClone">
           <input type="text" id="copy_rep_content" value={key==="HTTP" ? http_url:ssh_url} />
-          <Tooltip title="复制链接">
-            <span className="color-blue" onClick={jsCopy}><i className="iconfont icon-fuzhi"></i></span>
-          </Tooltip>
+          <CopyTool inputId="copy_rep_content" className="copytool"/>
         </div>
       </div>
       <Menu className="edu-txt-center">

src/forge/Branch/branch.scss

@@ -102,4 +102,7 @@
       border-color:transparent ;
     }
   }
+}
+.copytool{
+  margin:0px 10px;
 }

src/forge/Component/CopyTool.jsx

@@ -9,24 +9,32 @@ CopyTool.defaultProps = {
 };
 
 
-function CopyTool({ beforeText, afterText, className,inputId }) {
+function CopyTool({ beforeText, afterText, className , inputId , timeOut }) {
   const [title, setTitle] = useState(() => {
     return beforeText;
   });
 
   // 复制链接
   const copyUrl = useCallback(() => {
-    let inputDom = document.getElementById(inputId);
-    if (!inputDom) {
+    const copyEle = document.querySelector(`#${inputId}`); // 获取要复制的节点
+    if (!copyEle) {
       console.error("您的CopyTool未设置正确的inputId");
       return;
     }
-    inputDom.select();
+    const range = document.createRange(); // 创造range
+    window.getSelection().removeAllRanges(); //清除页面中已有的selection
+    range.selectNode(copyEle); // 选中需要复制的节点
+    window.getSelection().addRange(range); // 执行选中元素
+    
     if (document.execCommand('copy')) {
       document.execCommand('copy');
     }
     setTitle(afterText);
-    inputDom.blur();
+    if(timeOut){
+      setTimeout(function(){
+        setTitle(beforeText);
+      },1500)
+    }
   }, []);
 
   return (

src/forge/Main/sub/Invite.jsx

@@ -1,26 +1,15 @@
 import React from 'react';
-import { Tooltip , message } from 'antd';
 import './sub.scss';
+import CopyTool from '../../Component/CopyTool';
 
 function Invite({code,className}) {
 
-  function jsCopy(id) {
-    const copyEle = document.querySelector(id); // 获取要复制的节点
-    const range = document.createRange(); // 创造range
-    window.getSelection().removeAllRanges(); //清除页面中已有的selection
-    range.selectNode(copyEle); // 选中需要复制的节点
-    window.getSelection().addRange(range); // 执行选中元素
-    document.execCommand("Copy"); // 执行copy操作
-    message.success('复制成功');
-  }
   return(
     <div className={className}>
       <span className="font-16 color-grey-6">邀请码</span>
       <div>
         <span id="devitecode">{code}</span>
-        <Tooltip title={<p className="edu-txt-center">可以通过邀请码邀请成员加入项目<br/>点击复制邀请码。</p>}  placement={"bottom"}>
-          <i className="iconfont icon-fuzhi2 font-16 color-blue ml8" onClick={()=>jsCopy("#devitecode")}></i>
-        </Tooltip>
+        <CopyTool timeOut={true} beforeText={<p className="edu-txt-center">可以通过邀请码邀请成员加入项目<br/>点击复制邀请码。</p>} className="ml8 font-16" inputId="devitecode"/>
       </div>
     </div>
   )