zoukankan      html  css  js  c++  java
  • react 复制内容

    const  CopyList=(props)=>{
        const handleCopyClick = (e) =>{
            //复制的内容
            console.log(99,props.text);
            copy(props.text);
            if(props.text){
                message.success('复制成功');
            }
            const range = document.createRange();
    
            window.getSelection().removeAllRanges();
            // range.selectNodeContents(e.target.innerHTML);
            range.selectNode(e.target.innerText);
            window.getSelection().addRange(range);  //返回一个selection对象
            const successful = document.execCommand('copy');  //执行copy命令
            if(successful){
                message.success('复制成功');
            }
        }
        return(
            <span className='copyMacro' onClick={(e)=>handleCopyClick(e)}><span className="iconfont icon-fuzhi" style={{color: '#FFFFFF',marginRight:'7px',marginTop:'7px',fontSize:'13px'}}></span>复制</span>
        )
    }
    <Tooltip placement="topRight" overlayClassName="tooltip-custom" title={<CopyList text={'燕窝不再小女生'} />} color='#3771E4' >
                            <span className="iconfont icon-wangwang
         toolSpan" style={{color:"#1897F2",marginRight:'4px',fontSize:'13px',verticalAlign:'middle'}}></span>
                            <span  className='copySelector'>燕窝不再小女生</span>
                        </Tooltip>

    方法二

    copyList=(text)=>{
            return (
                <span className='copyMacro' onClick={this.handleCopyClick.bind(this,text)}><span className="iconfont icon-fuzhi" style={{color: '#FFFFFF',marginRight:'7px',marginTop:'7px',fontSize:'13px'}}></span>复制</span>
            )
        }
    
    handleCopyClick = (text) =>{
              //复制的内容
            console.log(99,text);
    }
    
    <Tooltip placement="topRight" overlayClassName="tooltip-custom" title={this.copyList.bind(this,'燕窝不再小女生')} color='#3771E4' >
                            <span className="iconfont icon-wangwang
         toolSpan" style={{color:"#1897F2",marginRight:'4px',fontSize:'13px',verticalAlign:'middle'}}></span>
                            <span  className='copySelector'>燕窝不再小女生</span>
                        </Tooltip>
    import copy from 'copy-to-clipboard';
  • 相关阅读:
    hdu 1060 Leftmost Digit
    HDU 1081 To The Max 动态规划
    不安装Oracle客户端,透过PL/SQL Developer连接Server DB
    ASP.net:Ftp操作FtpWebRequest
    VS2008:log4net.dll 使用
    社会生活——《哥哥又逃票了》
    VS2008:AjaxPro.2 的应用
    Linq to SQL 根据自己需要更改数据源
    ExtJS Combobox 如何改变下拉列列宽问题
    ExtJs 的Enter特殊键事件处理
  • 原文地址:https://www.cnblogs.com/isuansuan/p/13542832.html
Copyright © 2011-2022 走看看