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

相关推荐
全栈老李技术面试9 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
csj5010 小时前
前端基础之《Vue(11)—自定义指令》
前端·vue
jaywongX17 小时前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
前端极客探险家21 小时前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel
有什么东东2 天前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
络72 天前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
脑瓜嗡3 天前
发送百度地图的定位
vue·php
巴啦啦臭魔仙4 天前
buildadmin 自定义单元格渲染
vue·php
小贺要学前端4 天前
前端如何优雅地对接后端
前端·性能优化·vue·前端优化