ve-anchor 锚点

目录

ve-anchor 锚点

功能描述

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

Api

效果图

在需要使用该组件的 Vue 文件中,引入组件:

javascript 复制代码
<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开发,需要在此基础上使用。

相关推荐
落魄实习生2 小时前
AI应用-本地模型实现AI生成PPT(简易版)
python·ai·vue·ppt
bpmf_fff4 小时前
二九(vue2-05)、父子通信v-model、sync、ref、¥nextTick、自定义指令、具名插槽、作用域插槽、综合案例 - 商品列表
vue
java_heartLake10 小时前
Vue3之状态管理Vuex
vue·vuex·前端状态管理
小马超会养兔子11 小时前
如何写一个数字老虎机滚轮
开发语言·前端·javascript·vue
小阳生煎14 小时前
多个Echart遍历生成 / 词图云
vue
小马超会养兔子2 天前
如何写一个转盘
开发语言·前端·vue
bpmf_fff2 天前
二八(vue2-04)、scoped、data函数、父子通信、props校验、非父子通信(EventBus、provide&inject)、v-model进阶
vue
好开心332 天前
04、Vue与Ajax
前端·ajax·前端框架·vue·js
工业互联网专业2 天前
Python毕业设计选题:基于Python的社区爱心养老管理系统设计与实现_django
python·django·vue·毕业设计·源码·课程设计
平行线也会相交3 天前
云图库平台(一)后端项目初始化
spring boot·vue·云图库平台