js复制链接并且选中文本

先看看效果图

然后再看看代码

import React, { useState } from 'react'
import {  Input, message } from 'antd';
import './index.scss'
import fly from '../../api/flyio'


/**
 * 7：职位详情的分享
 */
export default ({ userInfomation = {}, type, isVisible, handleToggleLayer,  jobName = '' }) => {
  const [tabType, setTabType] = useState(1)
  const tenantId = localStorage.getItem('tenantId')
  const [inputValue, setInputValue] = useState(`${window.location.href}`)

  const onChangeInput = e => {
    // console.log(e.currentTarget.value);
    const v = e.currentTarget.value
    setInputValue(v)
  };
  
  //复制功能
  const copylink = () => {
    // 在选择节点的时候，一定要只选择input  
    const copyDOM = document.querySelector('.middel-layer input');  //需要复制文字的节点

    const range = document.createRange(); //创建一个range
    window.getSelection().removeAllRanges();   //清除页面中已有的selection
    range.selectNode(copyDOM);    // 选中需要复制的节点    
    window.getSelection().addRange(range);   // 执行选中元素
    const successful = document.execCommand('copy');    // 执行 copy 操作  
    if (successful) {
      // copyDOM.select();
      message.success('复制成功！')
    } else {
      message.warning('复制失败，请手动复制！')
    }
    // 移除选中的元素  
    window.getSelection().removeAllRanges();
  }
  const onSelectInput = () => {
    copyAccessKey()
    document.querySelector('.middel-layer input').select() // 选中
  }
 
  return <div className={`layer-container ${isVisible ? '' : 'isHidden'}`}>
    {
      type === 7 ?
        <div className='layer-content time-layer'>
          <div className='time-layer-top border-bo'>
            <div className='top-left'>
              <div className='top-item active-txt' onClick={() => setTabType(1)}>
                <span>链接分享</span>
                <i />
              </div>
            </div>
            <div className='close-time-img iconfont iconpopup-close-bt' onClick={() => handleToggleLayer(false)} />
          </div> 
          <div className='share-item'>
                <div className='middel-layer'>
                  <h4>分享职位：{jobName}</h4>
                  <Input
                    placeholder='链接'
                    allowClear={false}
                    onChange={e => onChangeInput(e)}
                    prefix='链接'
                    value={inputValue}
                    onFocus={() => onSelectInput()}
                  // defaultValue={inputValue}
                  />
                  <p>可以将链接发送给你的微信、QQ等好友</p>
                </div>
                <div className='share-bottom-btn'>
                  <span className='cancle-btn' onClick={() => handleToggleLayer(false)}>取消</span>
                  <span onClick={() => copylink()}>复制链接</span>
                </div>
              </div>
        </div> : ''
    }
  </div>
}

  );
};

公众号

欢迎大家关注我的公众号： 石马上coding，一起成长