IndexList 索引列表

用于手机通讯录、城市选择列表的索引导航控件，支持右侧字母条滑动高亮、中央水滴气泡提示与头部 Sticky 吸顶。

---

代码示例

<template>
  <mu-index-list :data="contactData" height="100vh" @click="onContactClick" />
</template>

<script setup>
import { ref } from 'vue'

const contactData = ref([
  {
    index: 'A',
    items: [
      { name: '阿木', desc: '高级前端架构师', phone: '138****0001' },
      { name: '安妮', desc: 'UI/UX 资深设计师', phone: '139****0002' }
    ]
  },
  {
    index: 'B',
    items: [
      { name: '白云', desc: '全栈开发专家', phone: '137****0003' }
    ]
  }
])

const onContactClick = (item) => {
  console.log('点击联系人:', item.name)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
data	索引数据列表 (支持带 index 与 items 的分组数组，或扁平数组)	Array	-	[]
height	列表滚动容器高度	String	-	'100vh'
sticky	是否开启分组字母标题吸顶	Boolean	true | false	true
showTip	拖拽右侧字母栏时是否在中央显示气泡浮标	Boolean	true | false	true
indexKey	索引分组字段名	String	-	'index'
labelKey	主标题展示字段名	String	-	'label'

---

事件说明 (Events)

事件名	说明	回调参数
click / select	点击任意单项时触发	(item: Object)
change	切换当前索引字母时触发	(indexChar: String)

---

插槽说明 (Slots)

插槽名	说明
default	自定义单个列表项的渲染模板
header	顶部固定内容/热门城市导航区域插槽