Segmented 分段選擇器

分段控制器。選項支援字串快捷寫法與 { value, label, disabled } 物件寫法；block 可撐滿容器寬度。

分段選擇

<template>
  <div class="demo-col" style="gap: 20px">
    <LhSegmented v-model="view" :options="['列表', '網格', '圖冊']" />
    <p class="demo-note">字串陣列快捷寫法：{{ view }}</p>
    <LhSegmented v-model="dynasty" :options="options" />
    <p class="demo-note">物件寫法（含 disabled 項）：{{ dynasty }}</p>
    <LhSegmented v-model="view" :options="['列表', '網格', '圖冊']" disabled />
    <LhSegmented v-model="view" :options="['列表', '網格', '圖冊']" block />
    <p class="demo-note">block 撐滿容器寬度</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    view: '列表',
    dynasty: 'tang',
    options: [
      { value: 'tang', label: '唐' },
      { value: 'song', label: '宋' },
      { value: 'yuan', label: '元' },
      { value: 'ming', label: '明', disabled: true },
    ],
  }),
}
</script>

Props

屬性	說明	類型	預設值
v-model	當前值（model: modelValue/input）	string \| number	—
options	選項（字串或物件，必填）	(string \| number \| { value, label, disabled? })[]	—
disabled	整體停用	boolean	false
block	撐滿容器寬度	boolean	false
sx	sx 快速佈局屬性	—	—

Events

input（v-model，參數 (val)）、change (val)。

無障礙

根元素 role="radiogroup"，每項 role="radio" + aria-checked；鍵盤 ←/→ 切換。