XtfSegmented

组件说明

xtf-segmented 是用于局部视图切换的分段器，适合卡片内的订单、用户等轻量筛选。它以选项索引作为当前状态，并提供按钮和文字两种样式。

---

基础用法

1. 字符串选项

<template>
  <xtf-segmented
    :current="current"
    :values="['日', '周', '月']"
    @change="current = $event.currentIndex"
  />
</template>
<script>
export default {
  data() {
    return { current: 0 }
  }
}
</script>

2. 对象选项和事件

<template>
  <xtf-segmented :current="current" :options="options" block @clickItem="select" />
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      options: [
        { label: '订单', value: 'order' },
        { label: '用户', value: 'user' }
      ]
    }
  },
  methods: {
    select(payload) {
      this.current = payload.currentIndex
      uni.showToast({ title: payload.value, icon: 'none' })
    }
  }
}
</script>

3. 文字样式和禁用项

<template>
  <xtf-segmented
    :current="current"
    style-type="text"
    active-color="#d946ef"
    size="lg"
    :options="options"
    @update:current="current = $event"
  />
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      options: [
        { label: '全部', value: 'all' },
        { label: '待审核', value: 'pending', disabled: true },
        { label: '已完成', value: 'done' }
      ]
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
current	Number | String	0	当前激活项的索引，可用 v-model:current	受控切换
values	Array	[]	字符串或对象选项数组；options 有值时忽略	简单选项
options	Array	[]	优先级更高的选项数组	带值或禁用项
styleType	String	'button'	button 或 text	切换外观
activeColor	String	'var(--xtf-color-primary)'	激活颜色	品牌色定制
size	String	'md'	sm/md/lg 尺寸	不同密度布局
block	Boolean	false	是否撑满父容器并均分	全宽切换栏
customClass	String	''	根节点类名	局部定制
customStyle	String | Object	''	根节点样式	局部定制

values / options 每项支持的字段

字段	类型	默认值	说明
label	String	自动推导	显示文本；也支持 text
text	String	自动推导	label 的兼容显示字段
value	String | Number	索引	事件 payload 中的业务值
disabled	Boolean	false	禁用点击和事件发送

---

事件

事件名称	触发时机	回调参数	参数说明
update:current	选择新项时	(index: Number)	新激活项索引
change	选择新项时	(payload: Object)	{ currentIndex, current, value, item }
clickItem	选择新项时	(payload: Object)	同 change；禁用或重复点击不触发

事件使用示例

<template>
  <xtf-segmented
    :current="current"
    :values="['全部', '进行中']"
    @update:current="current = $event"
    @change="changed"
    @clickItem="clicked"
  />
</template>
<script>
export default {
  data() {
    return { current: 0 }
  },
  methods: {
    changed(p) {
      console.log('change', p.value)
    },
    clicked(p) {
      uni.showToast({ title: '索引 ' + p.currentIndex, icon: 'none' })
    }
  }
}
</script>

---

主题说明

• 激活背景使用 var(--xtf-segmented-active-color)，由 activeColor 写入。
• 容器使用 var(--xtf-color-surface-muted) 和 var(--xtf-color-border)，普通文字使用 var(--xtf-color-text-secondary)。
• 在 xtf-config-provider 覆盖全局颜色，或传入 activeColor 调整单个组件。