Segmented 分段控制器

一组互斥选项，以背景滑块指示当前选中项，常用于视图切换或筛选。

基础用法

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

const value = ref('article')
const options = [
  { label: '自动', value: 'auto' },
  { label: '文章', value: 'article' },
  { label: '大纲', value: 'outline' }
]
</script>

<ASegmented v-model="value" :options="options" />

尺寸

<ASegmented :options="options" size="sm" />
<ASegmented :options="options" size="md" />

禁用状态

<ASegmented v-model="value" :options="options" disabled />

API

Props

名称	类型	默认值	说明
modelValue	string | number	''	当前选中值
options	SegmentedOption[]	[]	选项列表
disabled	boolean	false	是否整体禁用
size	'sm' | 'md'	'md'	尺寸

SegmentedOption

名称	类型	默认值	说明
label	string	—	显示文本
value	string | number	—	选项值
disabled	boolean	false	是否禁用该项

Emits

名称	参数	说明
update:modelValue	string | number	选中值变化时触发
change	string | number	用户确认选择时触发

交互特性

• 白色指示器块通过 left + width 双过渡，使用 --ease-spring 弹性曲线滑动跟随
• 键盘支持：左右箭头切换选项，Home / End 跳至首尾
• 选中项文字加深为 --color-neutral-950，未选中项为 --color-neutral-500