用于跳轉到頁面指定位置。
何時使用
需要展現當前頁面上可供跳轉的錨點鏈接，以及快速在錨點之間跳轉。
案例：錨點的基本使用
核心代碼：
<template><a-anchor:items="[{key: 'part-1',href: '#part-1',title: () => h('span', { style: 'color: red' }, 'Part 1'),},{key: 'part-2',href: '#part-2',title: 'Part 2',},{key: 'part-3',href: '#part-3',title: 'Part 3',},]"/>
</template>
<script lang="ts" setup>
import { h } from 'vue';
</script>
vue3示例：
<script setup>
const menuItems = [{key: "index",href: "/",title: "首頁"},{key: "auth",href: "/auth",title: "權限管理"},{key: "setting",href: "/setting",title: "配置管理"},
]
</script>
<template><a-anchor :items="menuItems"/>
</template>
案例：錨點的動態渲染
核心代碼：
title: () => h('span', { style: 'color: red' }, 'Part 1'),
vue3示例：
<script setup>
import {h} from "vue";const menuItems = [{key: "index",href: "/",title: ()=> h('span', {style: 'color: red'}, "首頁")},{key: "auth",href: "/auth",title: "權限管理"},{key: "setting",href: "/setting",title: "配置管理"},
]
</script>
<template><a-anchor :items="menuItems"/>
</template>
案例：橫向錨點
設置 direction="horizontal" 能夠實現橫向錨點。
核心代碼：
<template><divstyle="{padding: '20px';}"><a-anchordirection="horizontal":items="[{key: 'horizontally-part-1',href: '#horizontally-part-1',title: 'Part 1',},{key: 'horizontally-part-2',href: '#horizontally-part-2',title: 'Part 2',},{key: 'horizontally-part-3',href: '#horizontally-part-3',title: 'Part 3',},{key: 'horizontally-part-4',href: '#horizontally-part-4',title: 'Part 4',},{key: 'horizontally-part-5',href: '#horizontally-part-5',title: 'Part 5',},{key: 'horizontally-part-6',href: '#horizontally-part-6',title: 'Part 6',},]"/></div>
</template>
vue3示例：
<script setup>
import {h} from "vue";const menuItems = [{key: "index",href: "/",title: ()=> h('span', {style: 'color: red'}, "首頁")},{key: "auth",href: "/auth",title: "權限管理"},{key: "setting",href: "/setting",title: "配置管理"},
]
</script>
<template><a-anchor :items="menuItems" direction="horizontal"/>
</template>
屬性
| 成員 | 說明 | 類型 | 默認值 | 版本 |
|---|---|---|---|---|
| affix | 固定模式 | boolean | true | |
| bounds | 錨點區域邊界 | number | 5(px) | |
| getContainer | 指定滾動的容器 | () => HTMLElement | () => window | |
| getCurrentAnchor | 自定義高亮的錨點 | (activeLink: string) => string | - | activeLink(3.3) |
| offsetBottom | 距離窗口底部達到指定偏移量后觸發 | number | ||
| offsetTop | 距離窗口頂部達到指定偏移量后觸發 | number | ||
| showInkInFixed | :affix="false" 時是否顯示小方塊 | boolean | false | |
| targetOffset | 錨點滾動偏移量，默認與 offsetTop 相同，例子 | number | offsetTop | 1.5.0 |
| wrapperClass | 容器的類名 | string | - | |
| wrapperStyle | 容器樣式 | object | - | |
| items | 數據化配置選項內容，支持通過 children 嵌套 | { key, href, title, target, children }[] 具體見 | - | 4.0 |
| direction | 設置導航方向 | vertical | horizontal | vertical |
| customTitle | 使用插槽自定義選項 title | v-slot=“AnchorItem” | - | 4.0 |
子節點屬性
| 成員 | 說明 | 類型 | 默認值 | 版本 |
|---|---|---|---|---|
| key | 唯一標志 | string | number | - | |
| href | 錨點鏈接 | string | - | |
| target | 該屬性指定在何處顯示鏈接的資源 | string | - | |
| title | 文字內容 | VueNode | (item: AnchorItem) => VueNode | - | |
| children | 嵌套的 Anchor Link，注意：水平方向該屬性不支持 | AnchorItem[] |
事件
| 事件名稱 | 說明 | 回調參數 | 版本 | |
| change | 監聽錨點鏈接改變 | (currentActiveLink: string) => void | 1.5.0 | |
| click | click 事件的 handler | Function(e: MouseEvent, link: Object) |
鏈接屬性
| 成員 | 說明 | 類型 | 默認值 | 版本 |
| href | 錨點鏈接 | string | ||
| target | 該屬性指定在何處顯示鏈接的資源。 | string | 1.5.0 | |
| title | 文字內容 | string|slot |
