xtf-index-anchor

组件说明

xtf-index-anchor 是索引锚点组件，必须配合 xtf-index-bar 使用。用于标记索引分组标题，支持吸顶和自定义颜色指示器，适用于通讯录分组、城市列表分组等场景。

---

基础用法

1. 基础用法

在 xtf-index-bar 中使用，通过 index 设置索引字符：

<template>
  <xtf-index-bar :index-list="['A', 'B', 'C']">
    <xtf-index-anchor index="A">
      <xtf-cell title="安琪" />
      <xtf-cell title="艾伦" />
    </xtf-index-anchor>
    <xtf-index-anchor index="B">
      <xtf-cell title="白雪" />
    </xtf-index-anchor>
    <xtf-index-anchor index="C">
      <xtf-cell title="陈明" />
    </xtf-index-anchor>
  </xtf-index-bar>
</template>

2. 带颜色指示器

通过 color 设置左侧指示器颜色：

<template>
  <xtf-index-bar :index-list="['热']">
    <xtf-index-anchor index="热" color="#ff4d4f">
      <xtf-cell title="热门城市1" />
      <xtf-cell title="热门城市2" />
    </xtf-index-anchor>
  </xtf-index-bar>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

3. 覆盖默认内容

默认插槽承载该锚点下的任意列表内容，可与 xtf-cell 组合构建联系人分组：

<template>
  <xtf-index-bar :index-list="['S']" :height="360">
    <xtf-index-anchor index="S" color="var(--xtf-color-primary)">
      <xtf-cell v-for="person in people" :key="person" :title="person" />
    </xtf-index-anchor>
  </xtf-index-bar>
</template>

<script>
export default {
  data() {
    return { people: ['孙宁', '宋琪', '沈月'] }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
index	String | Number	''	索引字符	索引
color	String	''	左侧指示器颜色	样式
sticky	Boolean	undefined	是否吸顶（继承 index-bar）	吸顶
stickyOffsetTop	String | Number	undefined	吸顶偏移（继承 index-bar）	吸顶
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

插槽

插槽名称	说明
default	锚点下的内容

---

事件

事件名称	触发时机	回调参数	说明
无	-	-	当前组件未声明或触发自定义事件；需要监听索引选择时，请监听父组件 xtf-index-bar 的 select 或 change 事件。

---

主题说明

• 锚点头部使用灰色背景
• 吸顶时使用 position: sticky
• 通过 inject 获取 xtf-index-bar 的配置

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。