sard-uniapp/components/indexes/README.md

sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库

---
title: Indexes
subtitle: 索引
group: 导航组件
---

## 介绍

用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。

## 引入

```js
import Indexes from 'sard-uniapp/components/indexes/indexes.vue'
import IndexesAnchor from 'sard-uniapp/components/indexes-anchor/indexes-anchor.vue'
```

## 代码演示

### 基础使用

`Indexes` 里面的 `IndexesAnchor` 组件会被收集起来，用于放置锚点和自动生成右侧的导航。导航和锚点会有一个联动效果。

<<< @demo/indexes/demo/Basic.vue

`AreaCode.vue`

<<< @demo/indexes/demo/AreaCode.vue

`AreaCodeSearch.vue`

<<< @demo/indexes/demo/AreaCodeSearch.vue

### 全屏

<<< @demo/indexes/demo/FullPage.vue

## API

### IndexesProps

| 属性       | 描述               | 类型             | 默认值 |
| ---------- | ------------------ | ---------------- | ------ |
| root-class | 组件根元素类名     | string           | -      |
| root-style | 组件根元素样式     | StyleValue       | -      |
| current    | 设置当前活动的锚点 | number \| string | -      |

### IndexesSlots

| 插槽    | 描述           | 属性 |
| ------- | -------------- | ---- |
| default | 自定义默认内容 | -    |

### IndexesEmits

| 事件                            | 描述               | 类型                               |
| ------------------------------- | ------------------ | ---------------------------------- |
| update:current <sup>1.12+</sup> | 索引发生变更时触发 | `(name: number \| string) => void` |
| change                          | 索引发生变更时触发 | `(name: number \| string) => void` |

### IndexesExpose

| 属性     | 描述           | 类型                               |
| -------- | -------------- | ---------------------------------- |
| scrollTo | 滚动到指定锚点 | `(name: string \| number) => void` |
| update   | 更新锚点位置   | `() => void`                       |

### IndexesAnchorProps

| 属性       | 描述           | 类型             | 默认值 |
| ---------- | -------------- | ---------------- | ------ |
| root-class | 组件根元素类名 | string           | -      |
| root-style | 组件根元素样式 | StyleValue       | -      |
| name       | 索引锚点名称   | number \| string | -      |

### IndexesAnchorSlots

| 插槽    | 描述                               | 属性 |
| ------- | ---------------------------------- | ---- |
| default | 自定义锚点内容，会覆盖 `name` 属性 | -    |

## 主题定制

### CSS 变量

<<< @comp/indexes/variables.scss#variables