vue+element实现双向描点

截图效果

左右双向绑定

<template>
  <!-- 填写申请信息 -->
  <el-row :gutter="15" class="main" ref="infoView">
      <el-col :span="16" class="anchor-content">
          <el-card shadow="hover" class="card1" id="project">
            <div slot="header">
              表单一
            </div>
            <div>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
            </div>
          </el-card>
          <el-card shadow="hover" class="card1 fadeInUp animated" id="insurance">
            <div slot="header">
              表单二
            </div>
            <div>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
            </div>
          </el-card>
          <el-card shadow="hover" class="card1 fadeInUp animated" id="insured">
            <div slot="header">
              表单三
            </div>
            <div>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
            </div>
          </el-card>
          <el-card shadow="hover" class="card1 fadeInUp animated" id="applicant">
            <div slot="header">
              表单四
            </div>
            <div>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
            </div>
          </el-card>
          <el-card shadow="hover" class="card1 fadeInUp animated" id="insuranceInfo">
            <div slot="header">
              表单五
            </div>
            <div>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
            </div>
          </el-card>
          <el-card shadow="hover" class="card1" id="invoiceInfo">
            <div slot="header">
              表单六
            </div>
            <div>
              asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>asdfdsafasdfasdf<br>
            </div>
          </el-card>
      </el-col>
      <el-col :span="4" class="fz-anchor-nav">
        <el-tabs tab-position="right" style="height: 400px;" v-model="navCurrent" @tab-click="handleClick">
          <el-tab-pane v-for="item in navList" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
        </el-tabs>
      </el-col>
  </el-row>
 
</template>
<script>
export default {
  name:"selectProject",
  props: [],
  data() {
    return{
      navCurrent:"project",
      navList: [
        {value: 'project',label: '表单一'},
        {value: 'insurance',label: '表单二'},
        {value: 'insured',label: '表单三'},
        {value: 'applicant',label: '表单四'},
        {value: 'insuranceInfo',label: '表单五'},
        {value: 'invoiceInfo',label: '表单六'},
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollPage)
  },
  methods: {
     handleClick(tab, event){
        // const returnEle = document.querySelector("#"+tab.name);  //将要跳转区域的id
        // if (!!returnEle) {
        //   returnEle.scrollIntoView(true); // true 是默认的
        // }
        // document.querySelector("#"+tab.name).scrollIntoView(true); //跳转对应的id

        this.$el.querySelector("#"+tab.name).scrollIntoView({
            behavior: "smooth", // 平滑过渡
            block: "start" // 上边框与视窗顶部平齐
        }); 
    },
    scrollPage() {
      /**
       * 反向联动
       */
      //获取所有锚点元素的高，并放在obj对象里     class用上了
      const navContents = document.querySelectorAll('.card1')
      const offsetTopArr = []
      for (let i = 0; i < navContents.length; i++) {
        const e = navContents[i]
        let temp = {
          offsetTop: e.offsetTop,
          id: e.id
        }
        offsetTopArr.push(temp)
      }
      console.log(offsetTopArr)
      // 获取当前文档流的滚动位置的高度 scrollTop
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 定义当前点亮的导航下标
      let navIndex = 'scene'
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是 n 了
        if (scrollTop >= offsetTopArr[n].offsetTop) {
          navIndex = offsetTopArr[n].id
        }
      }
      this.navCurrent = navIndex
      
      //变量windowHeight是可视区的高度
      let windowHeight1 = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight1 = document.documentElement.scrollHeight||document.body.scrollHeight;
      //滚动条到底部
      if(scrollTop+windowHeight1 == scrollHeight1){
        this.navCurrent = "invoiceInfo"
      }
    }
  }
}

</script>
<style scoped>

.anchor-nav{
  position: fixed;
}
</style>