Anchor 錨點

頁面內錨點導覽 + 滾動連動高亮。<nav> 語意 + aria-current="location"。

基礎用法

基礎用法

• 第一節
• 第二節
• 第二節之一

<script setup>
const anchorItems = [
  { id: 'sec-1', title: '第一节' },
  { id: 'sec-2', title: '第二节', children: [{ id: 'sec-2-1', title: '第二节之一' }] },
]
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: '第一节' },
        { id: 'sec-2', title: '第二节', children: [{ id: 'sec-2-1', title: '第二节之一' }] },
      ],
    }
  },
}
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

橫向排列與捲動選項

direction="horizontal" 切換橫向排列；smooth 關閉平滑捲動；offset 補償錨點區域相對捲動容器頂部的偏移；target 監聽指定捲動容器（預設 window）。

橫向錨點

• 第一節
• 第二節
• 第二節之一

<script setup>
const anchorItems = [
  { id: 'sec-1', title: '第一节' },
  { id: 'sec-2', title: '第二节' },
]
</script>

<template>
  <!-- 橫向錨點 -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: '第一节' },
        { id: 'sec-2', title: '第二节' },
      ],
    }
  },
}
</script>

<template>
  <!-- 橫向錨點 -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

API

LhAnchor Props

屬性名	說明	類型	預設值
items	錨點資料（支援子級）	[LhAnchorItem](#type-LhAnchorItem)[]	—
target	捲動容器（選擇器或元素，預設 window）	string | HTMLElement	—
offset	錨點區域相對捲動容器頂部的偏移（用於連動判定）	number	0
direction	排列方向	"vertical" | "horizontal"	'vertical'
smooth	平滑捲動	boolean	true
sx	sx 快速版面配置屬性	LhSxProps	—

Events

事件名	說明	回呼參數
change	目前啟用錨點變化時觸發（捲動連動或點選錨點）	(id: string)
click	點選錨點連結時觸發（先於捲動跳轉拋出）	(event: MouseEvent, id: string)

LhAnchorItem

欄位	說明	類型
id	目標元素 id	string
title	顯示文字	string
children	子級錨點	LhAnchorItem[]

無障礙

• 容器為語意 <nav> 且帶 aria-label；目前錨點標記 aria-current="location"
• 連結為真實 <a href="#id">（無 JS 也能跳轉，點選時增強為平滑捲動）
• 平滑捲動在 prefers-reduced-motion: reduce 下自動降級為即時跳轉

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/anchor/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhAnchorProps

export interface LhAnchorProps {
  /** 錨點資料（支援子級） */
  items: LhAnchorItem[]
  /** 捲動容器（選擇器或元素，預設 window） */
  target?: string | HTMLElement
  /** 錨點區域相對捲動容器頂部的偏移（用於連動判定） */
  offset?: number
  /** 排列方向 */
  direction?: 'vertical' | 'horizontal'
  /** 平滑捲動 */
  smooth?: boolean
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhFlatAnchorItem _{（來自 @lh-ui/share/core/anchor）}

/** 扁平化後的錨點項（繪製用） */
export interface LhFlatAnchorItem {
  id: string
  title: string
  level: number
}

LhAnchorItem _{（來自 @lh-ui/share/core/anchor）}

/** 錨點項 */
export interface LhAnchorItem {
  /** 目標元素 id */
  id: string
  /** 顯示文字 */
  title: string
  /** 子級錨點 */
  children?: LhAnchorItem[]
}