1.0.4 • Published 1 month ago
@tanzhenxing/zx-anchor v1.0.4
ZxAnchor 锚点组件
通过锚点，您可以很快找到当前页面上信息内容的位置。
基础用法
最简单的用法。
<template>
<zx-anchor :offset="70">
<zx-anchor-link href="#part1">第一部分</zx-anchor-link>
<zx-anchor-link href="#part2">第二部分</zx-anchor-link>
<zx-anchor-link href="#part3">
第三部分
<template #sub-link>
<zx-anchor-link href="#part3-1">子部分1</zx-anchor-link>
<zx-anchor-link href="#part3-2">子部分2</zx-anchor-link>
</template>
</zx-anchor-link>
</zx-anchor>
</template>水平模式
水平排列的锚点（水平模式不支持子链接）
<template>
<zx-anchor :offset="70" direction="horizontal">
<zx-anchor-link href="#part1">第一部分</zx-anchor-link>
<zx-anchor-link href="#part2">第二部分</zx-anchor-link>
<zx-anchor-link href="#part3">第三部分</zx-anchor-link>
</zx-anchor>
</template>自定义滚动区域
自定义滚动区域，使用 offset 属性可以设置锚点滚动偏移。
<template>
<div>
<div ref="containerRef" style="height: 300px; overflow-y: auto">
<div id="part1" style="height: 300px; background: rgba(255, 0, 0, 0.02)">part1</div>
<div id="part2" style="height: 300px; background: rgba(0, 255, 0, 0.02)">part2</div>
<div id="part3" style="height: 300px; background: rgba(0, 0, 255, 0.02)">part3</div>
</div>
<zx-anchor :container="containerRef" :offset="30" @click="handleClick">
<zx-anchor-link href="#part1" title="part1" />
<zx-anchor-link href="#part2" title="part2" />
<zx-anchor-link href="#part3" title="part3" />
</zx-anchor>
</div>
</template>
<script>
export default {
methods: {
handleClick(e) {
// 阻止浏览器默认行为
e.preventDefault()
}
}
}
</script>下划线类型
设置 type="underline" 更改为下划线类型
<template>
<zx-anchor type="underline" :offset="70">
<zx-anchor-link href="#part1">第一部分</zx-anchor-link>
<zx-anchor-link href="#part2">第二部分</zx-anchor-link>
<zx-anchor-link href="#part3">第三部分</zx-anchor-link>
</zx-anchor>
</template>监听锚点变化
使用 change 事件可以监听当前活动锚点的变化
<template>
<zx-anchor :offset="70" @change="handleChange">
<zx-anchor-link href="#part1">第一部分</zx-anchor-link>
<zx-anchor-link href="#part2">第二部分</zx-anchor-link>
<zx-anchor-link href="#part3">第三部分</zx-anchor-link>
</zx-anchor>
</template>
<script>
export default {
methods: {
handleChange(href) {
console.log(`锚点变化: ${href}`)
}
}
}
</script>属性
ZxAnchor 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| container | 滚动的容器 | string | HTMLElement | Window |
| offset | 设置锚点滚动的偏移量 | number | 0 |
| bound | 触发锚点的元素的位置偏移量 | number | 15 |
| duration | 设置容器滚动持续时间，单位为毫秒 | number | 300 |
| marker | 是否显示标记 | boolean | true |
| type | 设置锚点类型 | 'default' | 'underline' | 'default' |
| direction | 设置锚点方向 | 'vertical' | 'horizontal' | 'vertical' |
| selectScrollTop | 滚动时，链接是否选中位于顶部 | boolean | false |
ZxAnchor 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 锚点链接变化时的回调 | Function(href: string) |
| click | 当用户点击链接时触发 | Function(event: Event) |
ZxAnchor 方法
| 名称 | 说明 | 类型 |
|---|---|---|
| scrollTo | 手动滚动到特定位置 | Function(href: string) |
ZxAnchorLink 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 链接的文本内容 | string | '' |
| href | 链接的地址 | string | '#' |
ZxAnchorLink 插槽
| 名称 | 说明 |
|---|---|
| default | 链接的内容 |
| sub-link | 子链接的插槽 |