el-anchor 锚点
时间: 2024-04-08 17:26:37 浏览: 1297
微信小程序scroll-view锚点链接滚动跳转功能
5星 · 资源好评率100%
el-anchor是Element UI框架中的一个组件,用于实现页面内的锚点导航功能。它可以帮助用户快速定位到页面中的指定位置。
el-anchor组件的主要特点和用法如下:
1. 使用el-anchor组件需要配合el-anchor-link组件一起使用。el-anchor-link是锚点的链接,el-anchor是锚点的容器。
2. el-anchor组件通过设置属性affix来控制是否固定在页面上方,默认为true,即固定在页面上方。
3. el-anchor-link组件通过设置属性href来指定锚点的目标位置,可以是一个id选择器或者一个具体的元素。
4. el-anchor-link组件可以通过设置属性title来指定锚点的标题,用于在锚点导航中显示。
5. el-anchor组件可以通过设置属性offset-top来调整锚点距离顶部的偏移量,默认为0。
6. el-anchor-link组件可以通过设置属性offset-top来调整点击锚点后滚动到目标位置时的偏移量,默认为0。
使用el-anchor组件的示例代码如下:
```
<template>
<div>
<el-anchor affix>
<el-anchor-link href="#section1" title="Section 1"></el-anchor-link>
<el-anchor-link href="#section2" title="Section 2"></el-anchor-link>
<el-anchor-link href="#section3" title="Section 3"></el-anchor-link>
</el-anchor>
<div id="section1">
Section 1 Content
</div>
<div id="section2">
Section 2 Content
</div>
<div id="section3">
Section 3 Content
</div>
</div>
</template>
```
阅读全文