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

相关推荐
知识分享小能手8 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
小灰灰的可爱无人可替代9 小时前
记录一次使用docker和docker-compose更新vue前端项目问题
nginx·docker·vue
java水泥工1 天前
酒店客房管理系统|基于SpringBoot和Vue的酒店客房管理系统(源码+数据库+文档)
spring boot·vue·酒店管理系统·酒店客房管理系统
爱看书的小沐3 天前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
知识分享小能手4 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
知识分享小能手5 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
sniper_fandc5 天前
Vue3双向数据绑定v-model
前端·vue
知识分享小能手5 天前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
叫兽~~6 天前
vite vue 打包后运行,路由首页加载不出来
vue.js·vue
岁岁岁平安7 天前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue