SegmentedSlider 分段滑块

用于在预定义的离散选项中进行选择的分段滑块组件。

基础用法

SegmentedSlider

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
const segments = [
  { value: 0, label: 'Small' },
  { value: 1, label: 'Medium' },
  { value: 2, label: 'Large' },
  { value: 3, label: 'XL' },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; width: 400px;">
    <div>
      <div style="font-size: 12px; opacity: 0.72; margin-bottom: 8px;">
        当前值: {{ value }}
      </div>
      <TxSegmentedSlider v-model="value" :segments="segments" />
    </div>
  </div>
</template>

自定义选项

SegmentedSlider (custom)

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const priceValue = ref('pro')
const priceSegments = [
  { value: 'free', label: 'Free' },
  { value: 'pro', label: 'Pro' },
  { value: 'team', label: 'Team' },
  { value: 'enterprise', label: 'Enterprise' },
]

const ratingValue = ref(3)
const ratingSegments = [
  { value: 1, label: '⭐' },
  { value: 2, label: '⭐⭐' },
  { value: 3, label: '⭐⭐⭐' },
  { value: 4, label: '⭐⭐⭐⭐' },
  { value: 5, label: '⭐⭐⭐⭐⭐' },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 24px; width: 400px;">
    <div>
      <div style="font-size: 14px; margin-bottom: 12px;">
        价格档位选择
      </div>
      <div style="font-size: 12px; opacity: 0.72; margin-bottom: 8px;">
        当前: {{ priceValue }}
      </div>
      <TxSegmentedSlider v-model="priceValue" :segments="priceSegments" />
    </div>

    <div>
      <div style="font-size: 14px; margin-bottom: 12px;">
        评分选择
      </div>
      <div style="font-size: 12px; opacity: 0.72; margin-bottom: 8px;">
        当前: {{ ratingValue }} 星
      </div>
      <TxSegmentedSlider v-model="ratingValue" :segments="ratingSegments" />
    </div>
  </div>
</template>

API

Props

属性名	类型	默认值	说明
`modelValue`	`number \| string`	`0`	当前选中值
`segments`	`SegmentedSliderSegment[]`	`[]`	分段选项数组
`disabled`	`boolean`	`false`	是否禁用
`showLabels`	`boolean`	`true`	是否显示标签
`vertical`	`boolean`	`false`	是否垂直排列

SegmentedSliderSegment

属性名	类型	说明
`value`	`number \| string`	选项值
`label`	`string`	选项标签（可选）

Events

事件名	参数	说明
`update:modelValue`	`(value: number \| string)`	值变化时触发
`change`	`(value: number \| string)`	值变化时触发