a标签锚点跳转被fixed元素挡住了_两个实用功能 1.复制粘贴功能 2.react锚点处理...

1

复制

效果看gif

直接封装一个函数 传入要复制的内容

然后把事件绑定在复制图标上

实现起来比较简单，但是加到自己的项目中可能就会很好的增加用户体验

copy = (e) => {
let copyDom = document.createElement("input");
// 获得需要复制的内容
copyDom.setAttribute("value",e);
//不要让他displaynone,否则复制不出来
// copyDom.style.display = "none";
// 添加到 DOM 元素中
document.body.appendChild(copyDom);
// 执行选中
// 注意: 只有 input 和 textarea 可以执行 select() 方法.
copyDom.select();
// 获得选中的内容
let content = window.getSelection().toString();
// 执行复制命令
document.execCommand("copy");
// 将 input 元素移除
document.body.removeChild(copyDom);
message.success('复制成功：'+e);
}

2react 锚点

在react中如果像我们在h5中一样使用锚点的话 页面会直接给我们报一个错误

因为正常的锚点处理会引起react的路由转跳从而造成错误

1 设置锚点 <div className='title' id='mao1'>基本信息</div>

2 设置click事件 <p><a onClick={() => this.scrollToAnchor('mao1')}>基本信息</a></p>

3实现锚点的跳转

scrollToAnchor = (anchorName) => {
//通过id anchorname是传来的id
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在，就跳转到锚点
//scrollIntoView让页面滚动到对应可视化区域内
if(anchorElement) {
anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});
}
}
}