vue实现锚点

最新推荐文章于 2024-08-13 10:36:33 发布

原创

最新推荐文章于 2024-08-13 10:36:33 发布 · 464 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #定位

在Vue项目中，为了实现一个说明书功能，涉及到左侧目录与右侧文档内容的交互。当点击左侧目录时，需要快速定位到右侧文档的对应部分。通过使用Vue的组件和HTML的锚点（anchor）特性，可以有效地解决这个问题。文章介绍了如何在Vue中创建一个锚点组件，以实现平滑的页面定位，同时提供了关于如何根据需求调整组件的注释信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中有一个需要实现说明书的功能，左侧有目录，右侧是全部的文档，点击左侧目录，可以直接定位到文档相应位置，想到了html原生代码herf跳转

<a href="#m1"> 通过id获取锚点</a>

<div style="width:100%;height:1000px"></div>

<div style=" height:100px; width:100%; background: red; id="m1"> 通过id获取锚点</div>

vue可用anchor组件实现

<template>
  <div >
     <div class="title"><h1>Vue-Lov-Anchor</h1></div>
     <!-- <div class="anchor-horizontal">
        <div class="anchor">
          <lov-anchor targetid="anchorid" horizontal>
             <lov-anchor-link v-for="id in 5" :key="id" :href="'#box'+id" :title="'anchorlink'+id"></lov-anchor-link>
             <lov-anchor-link  href="#box6">
               <template slot="slot">
                <span style="color:red"> slot-link6</span>
               </template>