Vue实现
// 使用:
// 页面引入 `import Anchor from './../../../components/common/Anchor'`
// <Anchor :title="title" v-if="title.t0"/>
<template>
<div class="anchor-container">
<div class="nav-icon common">
<i class="icon iconfont icon-Voucherarrangement"></i>
</div>
<div class="nav-bar common">
<div class="nav-bar-index">
<a v-for="(item,index) in nameList"
:key="index"
@click="onClick">{{item.name}}</a>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
nameList: []
};
},
props: {
title: {
type: Object,
default() {
return {};
}
}
},
created() {
this.initTitle();
},
methods: {
initTitle() {
//处理title对象,得到锚点列表对象数组nameList
let arr = [];
let obj = this.title;
Object.keys(obj).forEach((element, index) => {
arr.push({ name: obj[element] });
});
this.nameList = arr;
//这里实现给每个子表添加id作为标识
var i;
for (i = 0; i < this.nameList.length; i++) {
document
.getElementsByClassName("card")
[i + 1].setAttribute("id", this.nameList[i].name);
}
},
onClick(e) {
//e.target.innerText与id相同
//获取到元素的offsetTop顶部距离
let offsetTop = document.getElementById(e.target.innerText).offsetTop;
//滚动页面的section标签内的部分
document.getElementsByTagName("section")[0].scrollTo({ top: offsetTop });
}
}
};
</script>
<style scope>
.anchor-container {
z-index: 1000;
position: absolute;
top: 0px;
right: 0px;
}
.anchor-container:hover .nav-bar {
display: block;
}
.anchor-container i.icon-Voucherarrangement {
color: #80808082;
font-size: 33px;
line-height: 36px;
text-align: center;
}
.anchor-container .common {
position: absolute;
top: 91px;
right: 25px;
border: 1px solid rgb(238, 238, 238);
border-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5px;
background-color: white;
}
.anchor-container .nav-icon {
width: 34px;
height: 34px;
}
.anchor-container .nav-bar {
width: 150px;
right: 23px;
top: 88px;
padding: 17px;
background-color: #fff;
display: none;
}
.nav-bar-index {
width: 70%;
border-left: 1px solid rgba(0, 0, 0, 0.15);
vertical-align: top;
padding-left: 13px;
line-height: 32px;
}
.nav-bar-index a {
display: block;
}
html {
width: 100%;
height: auto;
overflow-x: hidden;
}
</style>
实现效果图
React实现
项目中封的组件总结,在tinper-bee之上封装的锚点组件,实现了功能,但不是最完美的解决方法,仅作记录。
//传入anchorData,content中存放锚点节点的组件
//例如content(<div>组件</div>)
const anchorData = [
{
href: "one",
id: "first",
name: "营业执照识别",
content: ""
}, {
href: "two",
id: "scond",
name: "子表",
content: ""
}
]
import './index.less'
import React, { Component } from 'react';
import { Anchor as AnchorBee } from 'tinper-bee';
import '../../style/utils/iconfont.css'
class Anchor extends Component {
constructor(props) {
super(props);
this.state = {
}
};
handleClick(href, e) {
e.preventDefault();
let offsetTop = document.getElementById(href).offsetTop;
window.scroll({ top: offsetTop, behavior: "smooth" });
};
render() {
const { anchorData } = this.props;
//anchorData中存放锚点
return (
<div className="demo1">
<div className="content">
{
anchorData.map((item, index) => {
return (
<div id={item.href} key={index}>
{item.content}
</div>
)
})
}
</div>
<div className="float-block">
<AnchorBee nid="aaa" selector="#my-awesome-nav a" className="my-anchorBee">
<ul id="my-awesome-nav" className="border-style ">
<div>
{
anchorData.map((item, index) => {
return (
//添加id为唯一标识
<li><a id={item.href} href={`#${item.href}`} onClick={this.handleClick.bind(this, item.href)}>{item.name}</a></li>
)
})
}
</div>
</ul>
</AnchorBee>
<div className="close-block border-style">
<i className="iconfont close"></i>
</div>
</div>
</div>
)
}
}
export default Anchor;
效果图