iView UI参考手册
组件布局
Anchor 锚点
概述
用于跳转到页面指定位置。
代码示例
- 基础用法
- 静态位置
- API
- Anchor props
- Anchor events
- AnchorLink props
基础用法
最简单的用法。
<template>
<Anchor show-ink>
<AnchorLink href="#basic_usage" title="Basic Usage" />
<AnchorLink href="#static_position" title="Static Position" />
<AnchorLink href="#API" title="API">
<AnchorLink href="#Anchor_props" title="Anchor props" />
<AnchorLink href="#Anchor_events" title="Anchor events" />
<AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
</AnchorLink>
</Anchor>
</template>
<script>
export default {
}
</script>
- 基础用法
- 静态位置
- API
- Anchor props
- Anchor events
- AnchorLink props
静态位置
不浮动,状态不随页面滚动变化。
<template>
<Anchor :affix="false" show-ink>
<AnchorLink href="#basic_usage" title="Basic Usage" />
<AnchorLink href="#static_position" title="Static Position" />
<AnchorLink href="#API" title="API">
<AnchorLink href="#Anchor_props" title="Anchor props" />
<AnchorLink href="#Anchor_events" title="Anchor events" />
<AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
</AnchorLink>
</Anchor>
</template>
<script>
export default {
}
</script>
API
Anchor props
属性 |
说明 |
类型 |
默认值 |
---|---|---|---|
affix |
固定模式 |
Boolean |
true |
offset-top |
距离窗口顶部达到指定偏移量后触发 |
Number |
0 |
offset-bottom |
距离窗口底部达到指定偏移量后触发 |
Number |
- |
bounds |
锚点区域边界,单位:px |
Number |
5 |
scroll-offset |
点击滚动的额外距离 |
Number |
0 |
container |
指定滚动的容器 |
String | HTMLElement |
- |
show-ink |
是否显示小圆点 |
Boolean |
false |
Anchor events
事件名 |
说明 |
返回值 |
---|---|---|
on-select |
点击锚点时触发,返回链接 |
href |
on-change |
链接改变时触发,返回新链接和旧链接 |
newHref, oldHref |
AnchorLink props
属性 |
说明 |
类型 |
默认值 |
---|---|---|---|
href |
锚点链接 |
String |
- |
title |
文字内容 |
String |
- |
scroll-offset |
点击滚动的额外距离 |
Number |
0 |