mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-29 04:46:36 +08:00
82 lines
1.4 KiB
Markdown
82 lines
1.4 KiB
Markdown
## IndexBar
|
|
|
|
### Install
|
|
|
|
``` javascript
|
|
import { IndexBar } from 'vant';
|
|
|
|
Vue.use(IndexBar);
|
|
```
|
|
|
|
### Usage
|
|
|
|
#### Basic Usage
|
|
|
|
```html
|
|
<van-index-bar>
|
|
<van-index-anchor index="A" />
|
|
<van-cell title="Text" />
|
|
<van-cell title="Text" />
|
|
<van-cell title="Text" />
|
|
|
|
<van-index-anchor index="B" />
|
|
<van-cell title="Text" />
|
|
<van-cell title="Text" />
|
|
<van-cell title="Text" />
|
|
|
|
...
|
|
</van-index-bar>
|
|
```
|
|
|
|
#### Custom Index List
|
|
|
|
```html
|
|
<van-index-bar :index-list="indexList">
|
|
<van-index-anchor index="1">Title 1</van-index-anchor>
|
|
<van-cell title="Text" />
|
|
<van-cell title="Text" />
|
|
<van-cell title="Text" />
|
|
|
|
<van-index-anchor index="2">Title 2</van-index-anchor>
|
|
<van-cell title="Text" />
|
|
<van-cell title="Text" />
|
|
<van-cell title="Text" />
|
|
|
|
...
|
|
</van-index-bar>
|
|
```
|
|
|
|
```js
|
|
export default {
|
|
data() {
|
|
return {
|
|
indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### IndexBar Props
|
|
|
|
| Attribute | Description | Type | Default |
|
|
|------|------|------|------|
|
|
| index-list | Index List | `Array` | `A-Z` |
|
|
|
|
### IndexAnchor Props
|
|
|
|
| Attribute | Description | Type | Default |
|
|
|------|------|------|------|
|
|
| index | Index | `String | Number` | - |
|
|
|
|
### IndexBar Events
|
|
|
|
| Event | Description | Arguments |
|
|
|------|------|------|
|
|
| select | Triggered when select index | index |
|
|
|
|
### IndexAnchor Slots
|
|
|
|
| Name | Description |
|
|
|------|------|
|
|
| default | Anchor content, show index by default |
|