代码演示 ​

如何引入 ​

jsx
import { Anchor } from '@kousum/semi-ui-vue';

基本示例 ​

使用 Link 可以创建锚点，点击它会跳转到指定位置。

综合使用 ​

你可以搭配 getContainer，targetOffset，style，offsetTop 完成一个拆箱即用的超链接导航栏。

  • 滚动容器：你可以通过 getContainer 设置滚动内容的容器，默认值为 window 。

  • 距离顶部的距离：可以通过设置 targetOffset 设置文档滚动结束时，锚点距离容器顶部的距离。v>=1.9

  • 自定义定位方式：Anchor 的默认定位方式为 relative，你可以通过 style 对象自定义它的定位方式。

  • 偏移距离：offsetTop 可以在滚动内容距离容器顶部达到指定偏移量时触发当前 Link 切换。

jsx

import { Anchor } from '@kousum/semi-ui-vue';

export default () => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <span>请看右侧固定的 Anchor </span>
            <Anchor
                getContainer={getContainer}
                offsetTop={100}
                targetOffset={100} // v>=1.9
                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3 }} >
                <Anchor.Link href="#基本示例" title="我是固定的 Anchor" />
                <Anchor.Link href="#综合使用" title="综合使用" />
                <Anchor.Link href="#尺寸" title="尺寸" />
                <Anchor.Link href="#滑轨主题" title="滑轨主题" />
                <Anchor.Link href="#动态展示" title="动态展示" />
                <Anchor.Link href="#显示工具提示" title="显示工具提示" />
                <Anchor.Link href="#工具提示位置" title="工具提示位置" />
                <Anchor.Link href="#API参考" title="API参考">
                    <Anchor.Link href="#Anchor" title="Anchor" />
                    <Anchor.Link href="#Anchor.Link" title="Anchor.Link" />
                </Anchor.Link>
            </Anchor>
        </div>
    );
};

尺寸 ​

Anchor 设置 size 可以控制锚点的尺寸。

滑轨主题 ​

Anchor 设置 railTheme 可以控制滑轨的主题色。默认值为 primary。

动态展示 ​

Anchor 设置 autoCollapse 可以动态展示下一级锚点。默认值为 false。

显示工具提示 ​

Anchor 设置 showTooltip 可以在 Link 超出最大宽度时显示 Link 的文字内容。默认值为 false, 更多使用参考 API 说明。

工具提示位置 ​

Anchor 设置 position 可以设置Tooltip的显示位置。它仅在 showTooltip 为 true 时起作用。

API 参考 ​

Anchor ​

属性说明类型默认值版本
autoCollapse滚动时动态显示下一级锚点booleanfalse
className类名string-
defaultAnchor默认高亮锚点string-1.20.0
getContainer指定滚动的容器() => HTMLElementwindow
maxHeight组件的 max-height，超出时显示滚动条string | number750px
maxWidth组件的 max-width，超出时显示...string | number200px
offsetTop滚动内容距离容器顶部达到指定偏移量时触发number0
onChange改变锚点的回调函数(currentLink, previousLink) => void-
onClick点击锚点回调函数(event, currentLink) => void-
positionTooltip 显示位置，可选值同 Tooltip 组件 positionstring-
railTheme滑轨主题，可选值：primary，tertiary，mutedstringprimary
scrollMotion是否开启滚动动画booleanfalse
showTooltip文字缩略时是否显示 Tooltip 及相关配置, type，浮层内容承载的组件，支持 Tooltip（默认） | Popover；opts，其他需要透传给浮层组件的属性, object 形式设置自 2.36.0 版本提供boolean | {type: 'tooltip'|'popover', opts: object}false
size锚点尺寸，可选值： small，defaultstringdefault
style样式对象object-
targetOffset锚点滚动时距离顶部偏移量number01.9.0
属性说明类型默认值版本
className类名string-
disabled禁用，不响应点击跳转booleanfalse1.20.0
href跳转的链接string-
style样式对象object-
title文字内容string|ReactNode-

文案规范 ​

  • 按句子大小写书写
  • 保持简洁，避免换行

设计变量 ​

FAQ ​

  1. 为何我的 Link 没有高亮和滑动跟随？
    检查下点击锚点是否可以滚动到指定位置：

    • 不可以，说明 href 有问题，检查文档中是否存在该 id；
    • 可以，可能是滚动容器设置不正确，确保文档内容被包裹在滚动容器内。滚动容器默认为 window，如果你的容器是 .my-container 的 div，则应该将滚动容器设置为该 div。
    text
    
import { Anchor } from '@kousum/semi-ui-vue';

function() {
    // 此容器不是 Anchor 组件的容器，是文档内容的容器，因为要根据文档容器去计算当前是哪个 id 在容器上方
    const getContainer = () => {
        return document.querySelector('.my-container');
    }
    return (
        <Anchor
            /* 其他属性 */
            getContainer={getContainer}
            >
            /* Links */
        </Anchor>
    )
}