ve-anchor 锚点

目录

• [ve-anchor 锚点](#ve-anchor 锚点)
• • 功能描述
  • Api
  • • 效果图
    • 属性
  • Assets
  • Warn

ve-anchor 锚点

功能描述

1. 需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。

Api

效果图

在需要使用该组件的 Vue 文件中，引入组件：

<script lang="ts" setup>
const items = ref([
  {
    id: 'part-1',
    title: 'part-1',
  },
  {
    id: 'part-2',
    title: 'part-2',
  },
  {
    id: 'part-3',
    title: 'part-3',
    children: [
      {
        id: 'part-3-1',
        title: 'part-3-1',
      },
      {
        id: 'part-3-2',
        title: 'part-3-2',
      },
    ],
  }
])
</script>
<template>
  <el-row id="parent-scroll" style="height: 300px; overflow: auto">
    <el-col :span="18">
      <div id="part-1" class="group" style="height: 300px; background: #C6E2FF"/>
      <div id="part-2" class="group" style="height: 300px; background: #F8E3C5"/>
      <div id="part-3" class="group" style="height: 300px; background: #FCD3D3"/>
      <div id="part-3-1" class="group" style="height: 300px; background: #C6E2FF"/>
      <div id="part-3-2" class="group" style="height: 300px; background: #F8E3C5"/>
    </el-col>
    <el-col :span="6">
      <ve-anchor :items="items" group="group" parent-scroll="parent-scroll"/>
    </el-col>
  </el-row>
</template>
<style lang="less" scoped>
#parent-scroll {
  scroll-behavior: smooth;
  overflow-y: scroll; /* 确保容器可以滚动 */
}
</style>

属性

属性名	说明	类型	可选值	默认值
items	锚点树结构	array	-	-
items:id	锚点id，用于寻找对应的dom，该值对应锚点区域绑定的id属性	string	-	-
items:title	锚点id，用于寻找对应的dom，该值对应锚点区域绑定的id属性	string	-	-
group	所有锚点区域的class属性，用于获取锚点区域dom集合	string	-	-
parent-scroll	需要监听滚动的dom的id属性，用于获取滚动区域dom	string	-	-

Assets

插件市场：ve-anchor 锚点
源码：Github
源码：Gitee
组件库演示地址

Warn

1. 该组件是基于element-plus开发，需要在此基础上使用。

---