要使用 Vant3 的 IndexBar，首先确保你已经按照官方文档的说明安装和配置了 Vant3。
以下是一个简单的使用示例：
1. 在你的组件中引入 IndexBar 组件：
<template>
<vant-index-bar :indexes="indexes" @change="handleIndexChange">
<!-- 列表内容 -->
<vant-index-anchor index="A">
<!-- 以字母A开头的项目 -->
<!-- 你的项目内容放在这里 -->
</vant-index-anchor>
<!-- 可以有多个 vant-index-anchor 标签，分别对应不同的字母索引 -->
<vant-index-anchor index="B">
<!-- 以字母B开头的项目 -->
<!-- 你的项目内容放在这里 -->
</vant-index-anchor>
<!-- 更多的字母索引... -->
</vant-index-bar>
</template>
<script>
import { IndexBar, IndexAnchor } from 'vant';
export default {
components: {
[IndexBar.name]: IndexBar,
[IndexAnchor.name]: IndexAnchor,
},
data() {
return {
indexes: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
};
},
methods: {
handleIndexChange(index) {
// 处理索引变化的逻辑
console.log('当前索引:', index);
},
},
};
</script>
在这个示例中，indexes 数组定义了索引栏要显示的字母。@change 事件会在索引切换时触发，你可以在 handleIndexChange 方法中处理索引变化的逻辑。
根据你的实际需求，你需要在 vant-index-anchor 标签内部添加以不同字母开头的项目内容。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5764/Vant