ExUI

Appearance

Anchor 锚点 ​

用于跳转到页面指定位置。

基础用法 ​

最简单的用法。

基础用法
固定位置
API

基础用法

这是基础用法的内容区域。锚点组件会自动跟踪当前滚动位置，并高亮对应的锚点链接。

内容区域

固定位置

锚点可以固定在页面侧边，方便用户快速导航。

内容区域

API

查看完整的API文档。

内容区域
vue
<template>
  <ExAnchor @change="handleChange">
    <ExAnchorLink href="#basic" title="基础用法" />
    <ExAnchorLink href="#fixed" title="固定位置" />
    <ExAnchorLink href="#api" title="API" />
  </ExAnchor>
</template>

<script setup>
const handleChange = (href) => {
  console.log('锚点变化:', href)
}
</script>

嵌套锚点 ​

锚点支持嵌套。

组件
基础组件
表单组件
指南
安装
使用
vue
<template>
  <ExAnchor>
    <ExAnchorLink href="#components" title="组件">
      <ExAnchorLink href="#basic-components" title="基础组件" />
      <ExAnchorLink href="#form-components" title="表单组件" />
    </ExAnchorLink>
    <ExAnchorLink href="#guide" title="指南">
      <ExAnchorLink href="#installation" title="安装" />
      <ExAnchorLink href="#usage" title="使用" />
    </ExAnchorLink>
  </ExAnchor>
</template>

自定义偏移量 ​

设置锚点滚动偏移量。

第一节
第二节
第三节
vue
<template>
  <ExAnchor :offset-top="100" :target-offset="50">
    <ExAnchorLink href="#section1" title="第一节" />
    <ExAnchorLink href="#section2" title="第二节" />
    <ExAnchorLink href="#section3" title="第三节" />
  </ExAnchor>
</template>

API ​

Anchor Props ​

属性说明类型默认值
offset-top距离窗口顶部达到指定偏移量后触发number0
bounds锚点区域边界number5
target-offset设置锚点滚动偏移量number-
container指定滚动的容器() => HTMLElement | Window() => window
affix固定模式booleantrue

Anchor Events ​

事件名说明类型
click点击锚点时触发(href: string, item: AnchorItem) => void
change锚点改变时触发(href: string) => void

Anchor Methods ​

方法名说明类型
scrollToAnchor滚动到指定锚点(href: string) => void
属性说明类型默认值
href锚点链接string-
title锚点标题string-
事件名说明类型
click点击锚点时触发(href: string) => void