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

相关推荐
最好结果1 天前
ruoyi系统-vue-elementui 表格单元格点击复制功能实现:实践与问题解决
vue
叫我阿柒啊2 天前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
工业互联网专业2 天前
基于Spark的新冠肺炎疫情实时监控系统_django+spider
python·spark·django·vue·毕业设计·源码·课程设计
SheldonChang2 天前
Onlyoffice集成与AI交互操作指引(Iframe版)
java·人工智能·ai·vue·onlyoffice·postmessage
lichong9512 天前
【混合开发】Android+Webview+VUE播放视频之视频解析工具mediainfo-Macos
android·macos·架构·vue·音视频·api·postman
PBitW3 天前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
叫我阿柒啊3 天前
从全栈开发到云原生:一位Java工程师的实战经验分享
java·spring boot·redis·云原生·kafka·vue·全栈开发
叫我阿柒啊3 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
刺客-Andy4 天前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue