60 lines
2.9 KiB
Markdown
60 lines
2.9 KiB
Markdown
---
|
||
category: Components
|
||
type: Navigation
|
||
cols: 1
|
||
title: Anchor
|
||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
|
||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original
|
||
---
|
||
|
||
Hyperlinks to scroll on one page.
|
||
|
||
## When To Use
|
||
|
||
For displaying anchor hyperlinks on page and jumping between them.
|
||
|
||
## API
|
||
|
||
### Anchor Props
|
||
|
||
| Property | Description | Type | Default | Version |
|
||
| --- | --- | --- | --- | --- |
|
||
| affix | Fixed mode of Anchor | boolean | true | |
|
||
| bounds | Bounding distance of anchor area | number | 5(px) | |
|
||
| getContainer | Scrolling container | () => HTMLElement | () => window | |
|
||
| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | activeLink(3.3) |
|
||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
|
||
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
|
||
| showInkInFixed | Whether show ink-square when `：affix="false"` | boolean | false | |
|
||
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetoffset) | number | `offsetTop` | 1.5.0 |
|
||
| wrapperClass | The class name of the container | string | - | |
|
||
| wrapperStyle | The style of the container | object | - | |
|
||
| items | Data configuration option content, support nesting through children | { key, href, title, target, children }\[] [see](#anchoritem) | - | 4.0 |
|
||
| direction | Set Anchor direction | `vertical` \| `horizontal` | `vertical` | 4.0 |
|
||
| customTitle | custom option title by slot | v-slot="AnchorItem" | - | 4.0 |
|
||
|
||
### AnchorItem
|
||
|
||
| Property | Description | Type | Default | Version |
|
||
| --- | --- | --- | --- | --- |
|
||
| key | The unique identifier of the Anchor Link | string \| number | - | |
|
||
| href | The target of hyperlink | string | | |
|
||
| target | Specifies where to display the linked URL | string | | |
|
||
| title | The content of hyperlink | VueNode \| (item: AnchorItem) => VueNode | | |
|
||
| children | Nested Anchor Link, `Attention: This attribute does not support horizontal orientation` | [AnchorItem](#anchoritem)\[] | - | |
|
||
|
||
### Events
|
||
|
||
| Events Name | Description | Arguments | Version | |
|
||
| --- | --- | --- | --- | --- |
|
||
| change | Listening for anchor link change | (currentActiveLink: string) => void | | 1.5.0 |
|
||
| click | set the handler to handle `click` event | Function(e: MouseEvent, link: Object) | | |
|
||
|
||
### Link Props
|
||
|
||
| Property | Description | Type | Default | Version |
|
||
| -------- | ----------------------------------------- | ------------ | ------- | ------- |
|
||
| href | target of hyperlink | string | | |
|
||
| target | Specifies where to display the linked URL | string | | 1.5.0 |
|
||
| title | content of hyperlink | string\|slot | | |
|