js复制链接并且选中文本
程序员文章站
2023-12-29 15:12:40
先看看效果图然后再看看代码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, jobNa...
先看看效果图
然后再看看代码
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,一起成长
本文地址:https://blog.csdn.net/wangweiscsdn/article/details/107470632