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';
  • 相关阅读:
    windows系统历年高危漏洞
    安全产品分类
    防火墙
    UTM(统一威胁管理)
    ORA-39127: 调用 "WMSYS"."LT_EXPORT_PKG"."SCHEMA_INFO_EXP" 时发生意外错误
    oracle如何查看当前有哪些用户连接到数据库
    LINUX修改主机名
    删除Oracle用户及表空间
    Oracle AWR报告详细分析--比较详细
    RMAN优缺点及RMAN备份及恢复步骤
  • 原文地址:https://www.cnblogs.com/isuansuan/p/13542832.html
Copyright © 2011-2022 走看看