Select 選擇器

下拉選擇。預設下拉掛載到 body（fixed 定位跟隨觸發器），可用 popperContainer 指定容器或傳空原地渲染；完整鍵盤導覽（方向鍵 / Enter / ESC）。

選擇器

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" placeholder="請選擇題材" clearable name="theme" />
      <LhSelect v-model="value" :options="options" size="small" />
      <LhSelect v-model="value" :options="options" size="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" disabled />
      <LhSelect v-model="empty" :options="[]" aria-label="空資料">
        <template #empty>
          <span class="demo-note">插槽 empty：暫無符合題材</span>
        </template>
      </LhSelect>
    </div>
    <p class="demo-note">當前值：{{ value || '（未選擇）' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: 'ink',
    empty: undefined,
    options: [
      { value: 'ink', label: '水墨' },
      { value: 'paper', label: '宣紙' },
      { value: 'seal', label: '印章' },
      { value: 'blank', label: '留白' },
    ],
  }),
}
</script>

Props

屬性	說明	類型	預設值
v-model	選中值（與 option.value 符合；受控 modelValue prop）	unknown	—
options	選項列表 { value, label, disabled? }	LhSelectOption[]	[]
placeholder	佔位文案，缺省用語言包	string	t('select.placeholder')
clearable	顯示清空按鈕	boolean	false
size	尺寸	'small' \| 'medium' \| 'large'	'medium'
disabled	停用	boolean	false
popperContainer	下拉掛載目標	'body' \| HTMLElement \| string	'body'
name / ariaLabel	無障礙標注	string	—
sx	sx 快速佈局	—	—

Events

事件	說明	回呼參數
input	v-model 事件	—
change	選中值變化時觸發	(value, option)
clear	清空時觸發	—

Slots

插槽	說明
empty	無資料時內容（預設「暫無資料」）

無障礙

觸發器 role="combobox" + aria-expanded/haspopup，下拉 role="listbox"，選項 role="option"； 置於 LhFormItem 內校驗失敗時自動 aria-invalid。