码迷,mamicode.com
首页 > 其他好文 > 详细

react 复制内容

时间:2020-08-26 19:00:41      阅读:39      评论:0      收藏:0      [点我收藏+]

标签:from   list   size   exe   ons   cal   pyc   tor   tle   

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‘;

react 复制内容

标签:from   list   size   exe   ons   cal   pyc   tor   tle   

原文地址:https://www.cnblogs.com/isuansuan/p/13542832.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!