Segmented 分段选择器

互斥选项切换，视图切换器场景。

基础用法

基础用法

<script setup>
import { ref } from 'vue'
const view = ref('列表')
</script>

<template>
  <LhSegmented v-model="view" :options="['列表', '卡片', '表格']" />
</template>

<script>
export default {
  data() {
    return { view: '列表' }
  },
}
</script>

<template>
  <LhSegmented v-model="view" :options="['列表', '卡片', '表格']" />
</template>

禁用项与 block

禁用项

<script setup>
import { ref } from 'vue'
const seg = ref('day')
</script>

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: '日', value: 'day' }, { label: '周', value: 'week' }, { label: '月', value: 'month', disabled: true }]"
  />
</template>

<script>
export default {
  data() {
    return { seg: 'day' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: '日', value: 'day' }, { label: '周', value: 'week' }, { label: '月', value: 'month', disabled: true }]"
  />
</template>

组件级 disabled 禁用整个选择器。

整组禁用

<script setup>
import { ref } from 'vue'
const segDisabled = ref('甲')
</script>

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['甲', '乙', '丙']"
  />
</template>

<script>
export default {
  data() {
    return { segDisabled: '甲' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['甲', '乙', '丙']"
  />
</template>

API

LhSegmented Props

属性名	说明	类型	默认值
modelValue	当前值（受控 v-model）	string | number	—
options	选项（字符串快捷写法或对象）	[LhSegmentedInput](#type-LhSegmentedInput)[]	—
disabled	整组禁用	boolean	false
block	撑满容器	boolean	false
sx	sx 快速布局属性	LhSxProps	—

Events

事件名	说明	回调参数
update:modelValue	选中项变化时触发，配合 v-model 使用	(value: string | number)
change	选中项变化时触发（点击与方向键均会触发）	(value: string | number)

无障碍

• role="radiogroup" + 选项 role="radio" + aria-checked
• roving tabindex：方向键移动（跳过禁用项、首尾循环），仅焦点位可 Tab
• 选中底色用 CSS 变量过渡

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/segmented/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhSegmentedProps

export interface LhSegmentedProps {
  /** 当前值（受控 v-model） */
  modelValue?: LhSegmentedValue
  /** 选项（字符串快捷写法或对象） */
  options: LhSegmentedInput[]
  disabled?: boolean
  /** 撑满容器 */
  block?: boolean
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhSegmentedValue _{（来自 @lh-ui/share/core/segmented）}

/** 选项值类型 */
export type LhSegmentedValue = string | number

LhSegmentedInput _{（来自 @lh-ui/share/core/segmented）}

/** 输入选项（字符串快捷写法或对象） */
export type LhSegmentedInput = LhSegmentedValue | LhSegmentedOption

LhSegmentedOption _{（来自 @lh-ui/share/core/segmented）}

/** 选项对象形态 */
export interface LhSegmentedOption {
  label: string
  value: LhSegmentedValue
  disabled?: boolean
}