BizAnchor 锚点导航

滚动监听自动高亮 + 点击平滑滚动定位的锚点导航：container 指定滚动容器（选择器 / 元素，不传为页面滚动）、offset 激活线偏移、scroll-offset 定位顶部预留（吸顶栏高度）、vertical / horizontal 双布局、change 事件联动。订单 / 合同 / 工单长详情页分组导航、帮助中心文档页。

滚动监听经 rAF 节流；激活判定基于 getBoundingClientRect（区块顶部越过激活线即激活，向下兼容动态高度）。

基础用法

基本信息

订单基础字段 1 …

订单基础字段 2 …

订单基础字段 3 …

订单基础字段 4 …

订单基础字段 5 …

订单基础字段 6 …

商品明细

商品行 1 …

商品行 2 …

商品行 3 …

商品行 4 …

商品行 5 …

商品行 6 …

商品行 7 …

商品行 8 …

支付信息

支付流水 1 …

支付流水 2 …

支付流水 3 …

支付流水 4 …

支付流水 5 …

物流信息

物流轨迹 1 …

物流轨迹 2 …

物流轨迹 3 …

物流轨迹 4 …

物流轨迹 5 …

物流轨迹 6 …

备注

买家留言与客服备注 …

基本信息

商品明细

支付信息

物流信息

备注

容器内滚动自动高亮，点击平滑定位；items 的 id 对应目标区块元素 id。

<script setup lang="ts">
/** 场景：订单详情——容器内滚动自动高亮，点击平滑定位 */
import { BizAnchor } from 'vue3-ep-biz-lib'
import type { BizAnchorItem } from 'vue3-ep-biz-lib'

const items: BizAnchorItem[] = [
  { id: 'anchor-basic-info', label: '基本信息' },
  { id: 'anchor-goods', label: '商品明细' },
  { id: 'anchor-payment', label: '支付信息' },
  { id: 'anchor-logistics', label: '物流信息' },
  { id: 'anchor-remark', label: '备注' },
]
</script>

<template>
  <div style="display: flex; gap: 20px; max-width: 720px">
    <div
      id="anchor-scroll-box"
      style="flex: 1; height: 300px; overflow: auto; border: 1px solid #e4e7ed; border-radius: 4px; padding: 0 16px"
    >
      <h3 id="anchor-basic-info" style="padding-top: 16px">基本信息</h3>
      <p v-for="i in 6" :key="i" style="color: #909399; font-size: 13px">订单基础字段 {{ i }} …</p>
      <h3 id="anchor-goods" style="padding-top: 16px">商品明细</h3>
      <p v-for="i in 8" :key="i" style="color: #909399; font-size: 13px">商品行 {{ i }} …</p>
      <h3 id="anchor-payment" style="padding-top: 16px">支付信息</h3>
      <p v-for="i in 5" :key="i" style="color: #909399; font-size: 13px">支付流水 {{ i }} …</p>
      <h3 id="anchor-logistics" style="padding-top: 16px">物流信息</h3>
      <p v-for="i in 6" :key="i" style="color: #909399; font-size: 13px">物流轨迹 {{ i }} …</p>
      <h3 id="anchor-remark" style="padding-top: 16px">备注</h3>
      <p style="color: #909399; font-size: 13px">买家留言与客服备注 …</p>
    </div>
    <BizAnchor :items="items" container="#anchor-scroll-box" style="flex-shrink: 0" />
  </div>
</template>

显示代码

吸顶偏移

合同编号 HT-2026-0930（吸顶栏高 40px）

合同主体

甲乙方信息 1 …

甲乙方信息 2 …

甲乙方信息 3 …

甲乙方信息 4 …

甲乙方信息 5 …

甲乙方信息 6 …

甲乙方信息 7 …

条款明细

条款 1 …

条款 2 …

条款 3 …

条款 4 …

条款 5 …

条款 6 …

条款 7 …

条款 8 …

条款 9 …

签署记录

签署节点 1 …

签署节点 2 …

签署节点 3 …

签署节点 4 …

签署节点 5 …

签署节点 6 …

签署节点 7 …

合同主体

条款明细

签署记录

scroll-offset 点击定位时顶部预留吸顶栏高度；offset 激活线下移避免提前激活。

<script setup lang="ts">
/** 场景：吸顶详情头——scrollOffset 点击定位预留吸顶高度，offset 激活线下移 */
import { BizAnchor } from 'vue3-ep-biz-lib'
import type { BizAnchorItem } from 'vue3-ep-biz-lib'

const items: BizAnchorItem[] = [
  { id: 'offset-sec-1', label: '合同主体' },
  { id: 'offset-sec-2', label: '条款明细' },
  { id: 'offset-sec-3', label: '签署记录' },
]
</script>

<template>
  <div style="display: flex; gap: 20px; max-width: 720px">
    <div
      id="offset-scroll-target"
      style="flex: 1; height: 320px; overflow: auto; border: 1px solid #e4e7ed; border-radius: 4px"
    >
      <div
        style="position: sticky; top: 0; z-index: 1; background: #409eff; color: #fff; padding: 10px 16px; font-size: 14px"
      >
        合同编号 HT-2026-0930（吸顶栏高 40px）
      </div>
      <div style="padding: 0 16px 20px">
        <h3 id="offset-sec-1" style="padding-top: 12px">合同主体</h3>
        <p v-for="i in 7" :key="i" style="color: #909399; font-size: 13px">甲乙方信息 {{ i }} …</p>
        <h3 id="offset-sec-2" style="padding-top: 12px">条款明细</h3>
        <p v-for="i in 9" :key="i" style="color: #909399; font-size: 13px">条款 {{ i }} …</p>
        <h3 id="offset-sec-3" style="padding-top: 12px">签署记录</h3>
        <p v-for="i in 7" :key="i" style="color: #909399; font-size: 13px">签署节点 {{ i }} …</p>
      </div>
    </div>
    <BizAnchor
      :items="items"
      container="#offset-scroll-target"
      :offset="56"
      :scroll-offset="52"
      style="flex-shrink: 0"
    />
  </div>
</template>

显示代码

水平布局

概览

成员

动态

设置

概览

项目概要 1 …

项目概要 2 …

项目概要 3 …

项目概要 4 …

项目概要 5 …

项目概要 6 …

项目概要 7 …

成员

成员 1 …

成员 2 …

成员 3 …

成员 4 …

成员 5 …

成员 6 …

成员 7 …

成员 8 …

动态

动态 1 …

动态 2 …

动态 3 …

动态 4 …

动态 5 …

动态 6 …

动态 7 …

设置

项目设置 …

direction="horizontal" 下划线布局，顶部 Tab 形态。

<script setup lang="ts">
/** 场景：水平锚点——direction=horizontal 下划线布局，顶部 Tab 形态 */
import { BizAnchor } from 'vue3-ep-biz-lib'
import type { BizAnchorItem } from 'vue3-ep-biz-lib'

const items: BizAnchorItem[] = [
  { id: 'h-sec-1', label: '概览' },
  { id: 'h-sec-2', label: '成员' },
  { id: 'h-sec-3', label: '动态' },
  { id: 'h-sec-4', label: '设置' },
]
</script>

<template>
  <div style="max-width: 720px">
    <BizAnchor :items="items" container="#h-scroll-target" direction="horizontal" style="margin-bottom: 4px" />
    <div id="h-scroll-target" style="height: 280px; overflow: auto; border: 1px solid #e4e7ed; border-radius: 4px; padding: 0 16px">
      <h3 id="h-sec-1" style="padding-top: 14px">概览</h3>
      <p v-for="i in 7" :key="i" style="color: #909399; font-size: 13px">项目概要 {{ i }} …</p>
      <h3 id="h-sec-2" style="padding-top: 14px">成员</h3>
      <p v-for="i in 8" :key="i" style="color: #909399; font-size: 13px">成员 {{ i }} …</p>
      <h3 id="h-sec-3" style="padding-top: 14px">动态</h3>
      <p v-for="i in 7" :key="i" style="color: #909399; font-size: 13px">动态 {{ i }} …</p>
      <h3 id="h-sec-4" style="padding-top: 14px">设置</h3>
      <p style="color: #909399; font-size: 13px">项目设置 …</p>
    </div>
  </div>
</template>

显示代码

动态分组

基本信息

字段 1 …

字段 2 …

字段 3 …

字段 4 …

字段 5 …

字段 6 …

费用信息

费用行 1 …

费用行 2 …

费用行 3 …

费用行 4 …

费用行 5 …

费用行 6 …

费用行 7 …

附件材料

附件 1 …

附件 2 …

附件 3 …

附件 4 …

附件 5 …

附件 6 …

费用分组

基本信息

费用信息

附件材料

items 动态增减（权限控制可见分组）；区块 / items 变化后调 expose refresh 刷新激活态；scrollTo 外部定位。

<script setup lang="ts">
/** 场景：动态分组——items 动态增减（权限控制可见分组），refresh 刷新激活态 */
import { nextTick, ref } from 'vue'
import { ElButton, ElSwitch } from 'element-plus'
import { BizAnchor } from 'vue3-ep-biz-lib'
import type { BizAnchorInstance, BizAnchorItem } from 'vue3-ep-biz-lib'

const showFinance = ref(true)

const items = ref<BizAnchorItem[]>([
  { id: 'dyn-sec-1', label: '基本信息' },
  { id: 'dyn-sec-2', label: '费用信息' },
  { id: 'dyn-sec-3', label: '附件材料' },
])

const anchorRef = ref<BizAnchorInstance>()

const toggle = async (value: boolean | string | number): Promise<void> => {
  const base: BizAnchorItem[] = [{ id: 'dyn-sec-1', label: '基本信息' }]
  if (value) base.push({ id: 'dyn-sec-2', label: '费用信息' })
  base.push({ id: 'dyn-sec-3', label: '附件材料' })
  items.value = base
  await nextTick()
  anchorRef.value?.refresh()
}
</script>

<template>
  <div style="display: flex; gap: 20px; max-width: 720px">
    <div id="dyn-scroll-target" style="flex: 1; height: 280px; overflow: auto; border: 1px solid #e4e7ed; border-radius: 4px; padding: 0 16px">
      <h3 id="dyn-sec-1" style="padding-top: 14px">基本信息</h3>
      <p v-for="i in 6" :key="i" style="color: #909399; font-size: 13px">字段 {{ i }} …</p>
      <template v-if="showFinance">
        <h3 id="dyn-sec-2" style="padding-top: 14px">费用信息</h3>
        <p v-for="i in 7" :key="i" style="color: #909399; font-size: 13px">费用行 {{ i }} …</p>
      </template>
      <h3 id="dyn-sec-3" style="padding-top: 14px">附件材料</h3>
      <p v-for="i in 6" :key="i" style="color: #909399; font-size: 13px">附件 {{ i }} …</p>
    </div>
    <div style="flex-shrink: 0; display: flex; flex-direction: column; gap: 12px">
      <div style="display: flex; align-items: center; gap: 8px">
        <span style="font-size: 13px">费用分组</span>
        <ElSwitch v-model="showFinance" @change="toggle" />
      </div>
      <BizAnchor ref="anchorRef" :items="items" container="#dyn-scroll-target" />
      <ElButton size="small" @click="anchorRef?.scrollTo('dyn-sec-3')">定位到附件</ElButton>
    </div>
  </div>
</template>

显示代码

change 联动

商品管理/商品信息/

商品信息

属性 1 …

属性 2 …

属性 3 …

属性 4 …

属性 5 …

属性 6 …

属性 7 …

价格库存

规格价格 1 …

规格价格 2 …

规格价格 3 …

规格价格 4 …

规格价格 5 …

规格价格 6 …

规格价格 7 …

物流模板

运费规则 1 …

运费规则 2 …

运费规则 3 …

运费规则 4 …

运费规则 5 …

运费规则 6 …

商品信息

价格库存

物流模板

当前分组变化驱动外部状态（面包屑 / 埋点）。

<script setup lang="ts">
/** 场景：change 联动——当前分组变化驱动外部状态（面包屑 / 埋点） */
import { ref } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem, ElTag } from 'element-plus'
import { BizAnchor } from 'vue3-ep-biz-lib'
import type { BizAnchorItem } from 'vue3-ep-biz-lib'

const items: BizAnchorItem[] = [
  { id: 'evt-sec-1', label: '商品信息' },
  { id: 'evt-sec-2', label: '价格库存' },
  { id: 'evt-sec-3', label: '物流模板' },
]

const current = ref('商品信息')
</script>

<template>
  <div style="max-width: 720px">
    <ElBreadcrumb separator="/" style="margin-bottom: 10px">
      <ElBreadcrumbItem>商品管理</ElBreadcrumbItem>
      <ElBreadcrumbItem>
        <ElTag size="small">{{ current }}</ElTag>
      </ElBreadcrumbItem>
    </ElBreadcrumb>
    <div style="display: flex; gap: 20px">
      <div id="evt-scroll-target" style="flex: 1; height: 260px; overflow: auto; border: 1px solid #e4e7ed; border-radius: 4px; padding: 0 16px">
        <h3 id="evt-sec-1" style="padding-top: 14px">商品信息</h3>
        <p v-for="i in 7" :key="i" style="color: #909399; font-size: 13px">属性 {{ i }} …</p>
        <h3 id="evt-sec-2" style="padding-top: 14px">价格库存</h3>
        <p v-for="i in 7" :key="i" style="color: #909399; font-size: 13px">规格价格 {{ i }} …</p>
        <h3 id="evt-sec-3" style="padding-top: 14px">物流模板</h3>
        <p v-for="i in 6" :key="i" style="color: #909399; font-size: 13px">运费规则 {{ i }} …</p>
      </div>
      <BizAnchor
        :items="items"
        container="#evt-scroll-target"
        style="flex-shrink: 0"
        @change="(_id, item) => (current = item.label)"
      />
    </div>
  </div>
</template>

显示代码

自定义锚点项

基本信息

字段 1 …

字段 2 …

字段 3 …

字段 4 …

字段 5 …

字段 6 …

字段 7 …

字段 8 …

审核记录

审核节点 1 …

审核节点 2 …

审核节点 3 …

审核节点 4 …

审核节点 5 …

审核节点 6 …

审核节点 7 …

审核节点 8 …

附件材料

附件 1 …

附件 2 …

附件 3 …

附件 4 …

附件 5 …

附件 6 …

附件 7 …

基本信息

审核记录 6

附件材料 3

default slot 接管锚点项（图标 + 计数徽标），作用域 { item, active }。

<script setup lang="ts">
/** 场景：自定义锚点项——slot 接管（图标 + 计数徽标），作用域含 active 态 */
import { CircleCheck, Document, Paperclip } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
import { BizAnchor } from 'vue3-ep-biz-lib'
import type { BizAnchorItem } from 'vue3-ep-biz-lib'

interface StepItem extends BizAnchorItem {
  icon: 'doc' | 'check' | 'clip'
  count?: number
}

const items: StepItem[] = [
  { id: 'slot-sec-1', label: '基本信息', icon: 'doc' },
  { id: 'slot-sec-2', label: '审核记录', icon: 'check', count: 6 },
  { id: 'slot-sec-3', label: '附件材料', icon: 'clip', count: 3 },
]
</script>

<template>
  <div style="display: flex; gap: 20px; max-width: 720px">
    <div id="slot-scroll-target" style="flex: 1; height: 300px; overflow: auto; border: 1px solid #e4e7ed; border-radius: 4px; padding: 0 16px">
      <h3 id="slot-sec-1" style="padding-top: 14px">基本信息</h3>
      <p v-for="i in 8" :key="i" style="color: #909399; font-size: 13px">字段 {{ i }} …</p>
      <h3 id="slot-sec-2" style="padding-top: 14px">审核记录</h3>
      <p v-for="i in 8" :key="i" style="color: #909399; font-size: 13px">审核节点 {{ i }} …</p>
      <h3 id="slot-sec-3" style="padding-top: 14px">附件材料</h3>
      <p v-for="i in 7" :key="i" style="color: #909399; font-size: 13px">附件 {{ i }} …</p>
    </div>
    <BizAnchor :items="items" container="#slot-scroll-target" style="flex-shrink: 0">
      <template #default="{ item, active }">
        <span style="display: inline-flex; align-items: center; gap: 6px">
          <ElIcon :size="15" :color="active ? 'var(--el-color-primary)' : 'var(--el-text-color-secondary)'">
            <CircleCheck v-if="(item as StepItem).icon === 'check'" />
            <Paperclip v-else-if="(item as StepItem).icon === 'clip'" />
            <Document v-else />
          </ElIcon>
          {{ item.label }}
          <span
            v-if="(item as StepItem).count"
            style="font-size: 12px; padding: 0 6px; border-radius: 8px; background: var(--el-fill-color); color: var(--el-text-color-secondary)"
          >
            {{ (item as StepItem).count }}
          </span>
        </span>
      </template>
    </BizAnchor>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
items	BizAnchorItem[]	[]	锚点项（id 对应目标区块元素 id）
container	string | HTMLElement	—	滚动容器（选择器 / 元素；不传为 window 页面滚动）
offset	number	24	滚动监听阈值偏移（区块顶部越过该线即激活）
scroll-offset	number	16	点击定位时顶部预留偏移（吸顶栏高度）
direction	'vertical' | 'horizontal'	'vertical'	排列方向（竖线 / 下划线）

Events

事件名	参数	说明
change	(id, item)	激活锚点变化（滚动或点击定位后）

Slots

插槽名	说明
default	锚点项内容，作用域 { item, active }（不传渲染 label）

Expose

名称	类型	说明
scrollTo	(id: string) => void	外部触发滚动定位
refresh	() => void	手动刷新激活态（items / 区块动态变化后）
getActiveId	() => string	当前激活锚点 id

TIP

多个 demo 同页共存时注意区块 id 全局唯一（文档示例均已加前缀）；组件不做吸顶（sticky），由外层布局决定。