Anchor(锚点)

概述

Anchor (锚点) 组件用于实现页面内的锚点导航，通常应用于页面较长或有多个部分的内容展示。通过该组件，用户可以快速跳转到页面的不同位置，提升页面的可用性和用户体验。支持水平和竖直两种布局，且可以与图标结合使用，提供更加丰富的视觉效果。它能够根据需求自定义目标元素的定位，并且在用户点击锚点时平滑滚动至目标位置。

预览

Section 1

基本使用

<template>
  <!-- 竖直排列的锚点 -->
  <SeAnchor :items="anchorItems" type="vertical" @anchor-clicked="handleAnchorClick"  />
  <br/>
  <!-- 水平排列的锚点 -->
  <SeAnchor :items="anchorItems" type="horizontal" @anchor-clicked="handleAnchorClick"  />
</template>

<script lang="ts" setup>
import { ref } from "vue";

// 定义锚点项
const anchorItems = ref([
  { text: "Section 1", link: "#section1", icon: 'material-symbols:home', targetId: "section1", active: true },
  { text: "Section 2", link: "#section2", icon: "material-symbols:settings-outline", targetId: "section2" },
  { text: "Section 3", link: "#section3", icon: "mdi:user", targetId: "section3" },
]);

// 监听锚点点击事件
const handleAnchorClick = (clickedItem: any) => {
  console.log("锚点项被点击:", clickedItem);

  // 遍历锚点项，切换活动状态
  anchorItems.value.forEach(item => {
    // 将点击的锚点项设为 active，其他项设为非活动状态
    item.active = item === clickedItem;
  });

  // 可以在此处执行其他操作，例如滚动页面、修改其他状态等
};
</script>

功能说明

Anchor 组件提供了一个导航工具，用户点击锚点时，页面会平滑地跳转到与该锚点关联的目标区域。这个功能通常应用于多部分页面，帮助用户更便捷地浏览不同内容。组件支持水平和竖直两种排列方式，并且可以添加自定义图标，方便与页面其他元素风格一致。

支持多种布局方式：用户可以选择垂直排列或水平排列的锚点样式，适应不同页面布局需求。
图标支持：每个锚点可以显示一个图标，通过集成 se-icon 组件为每个锚点项添加图标，使其更具可视化效果。
平滑滚动：点击锚点后，页面将平滑滚动至对应的目标元素，提高页面交互体验。
自定义目标ID：通过 targetId 属性，用户可以控制锚点点击后的目标元素。

Anchor 参数

参数名	类型	默认值	描述	跳转 Demo
`items`	`Array<BreadcrumbItem>`	`[]`	必选，锚点项的数组。每个项可以包含文本、链接、图标等信息。	示例
`type`	`String`	`vertical`	可选，指定锚点的布局方式，支持 `vertical`（竖直）和 `horizontal`（水平）。	示例
`targetId`	`String`	`""`	可选，指定锚点的目标元素的ID，通过 `scrollIntoView` 滚动到页面上的指定元素。	示例

anchorItems 定义

每个锚点项的内容都通过 anchorItems 类型定义，包含以下属性：

属性名	类型	默认值	描述
`text`	`string`	必填	锚点的显示文本。
`link`	`string`	可选	锚点的链接地址。点击时会跳转到该链接，若为空，则视为普通文本。
`icon`	`string`	可选	图标名称，支持 `se-icon` 组件传入图标名称，作为锚点的左侧图标。
`active`	`boolean`	`false`	可选，当前是否为激活的锚点项，激活项通常有特定样式（如高亮显示）。
`targetId`	`string`	可选	可选，点击锚点后滚动页面到指定元素的ID。

参数说明

items：一个数组，包含若干个锚点项，每个锚点项会根据其内容展示相应的锚点链接或文本。
type：指定锚点的布局方式，支持 vertical 和 horizontal。vertical 会显示为竖直排列，horizontal 为水平排列。
targetId：指定点击锚点时页面滚动的目标元素ID，支持 scrollIntoView 平滑滚动。

其他说明

自定义图标：每个锚点可以通过传入 icon 属性添加一个图标，提升页面的视觉效果。默认情况下，图标是可选的。
平滑滚动：当用户点击锚点时，页面会平滑滚动到相应目标元素，这个效果是通过 scrollIntoView 来实现的，带来更流畅的用户体验。

Anchor(锚点) ​

概述 ​

预览 ​

功能说明 ​

Anchor 参数 ​

anchorItems 定义 ​

参数说明 ​

其他说明 ​