Vue React实现Anchor锚点组件

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">&#xe626;</i>
          </div>
        </div>
      </div>
    )
  }
}
export default Anchor;

效果图