vue利用Tree 树形控件和锚点链接实现导航功能

一.Tree 树形控件

<el-tree :data="data" :props="{ class: customNodeClass }" @node-click="handleNodeClick" />

const data: Tree[] = [
  {
    label: '标题一',
    isPenultimate: true,
    index:0
  },
  {
    label: '标题二',
    isPenultimate: true,
    index:1
  },
  {
    label: '标题三',
    isPenultimate: true,
    index:2
  },
]

二、页面

  <div class="sug_right">
       <div class="r_content" :id="`content${index}`" v-for="(item, index) in rightData" :key="index">
          <div class="title" >{{ item.title }}</div>
           <div class="r_img"></div>
        </div>
</div>

三、获取点击的标题函数

/**
 * 获取点击的标题
 * @param data 
 */
const handleNodeClick = (data: Tree) => {
  elePosition(`content${data.index}`)
}

四、设置滚动

/**
 * 设置滚动
 * @param offsetTop 
 */
const scrollTo = (offsetTop:number)=>{
    const parent = document.querySelector('.sug_right')
    parent?.scrollTo({
        top:offsetTop - 120,
        behavior:'smooth'
    })
}

五、设置滚动

/**
 * 获取元素距离父元素位置
 * @param id 
 */
const elePosition = (id:string)=>{
    const element = document.getElementById(id);
    scrollTo(element!.offsetTop)
}