Select 셀렉트

LhSelect는 옵션 목록에서 값을 선택하는 데 사용되며, 옵션 비활성화, 지우기, 키보드 조작을 지원합니다.

기본 사용법

기본 사용법

베이징⌄

<script setup lang="ts">
import { ref } from 'vue'
import { LhSelect } from '@lh-ui/vue3'

const selectedCity = ref('beijing')
const cityOptions = [
  { label: '베이징', value: 'beijing' },
  { label: '상하이', value: 'shanghai' },
  { label: '선전', value: 'shenzhen' },
]
</script>

<template>
  <!-- 기본 사용법 -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="도시를 선택하세요" />
</template>

<script>
import { LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhSelect },
  data() {
    return {
      selectedCity: 'beijing',
      cityOptions: [
        { label: '베이징', value: 'beijing' },
        { label: '상하이', value: 'shanghai' },
        { label: '선전', value: 'shenzhen' },
      ],
    }
  },
}
</script>

<template>
  <!-- 기본 사용법 -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="도시를 선택하세요" />
</template>

지우기와 비활성화

지우기와 비활성화

지역을 선택하세요⌄

화베이⌄

<script setup lang="ts">
import { ref } from 'vue'
import { LhSelect } from '@lh-ui/vue3'

const selectedRegion = ref('')
const selectedDisabled = ref('north')
const regionOptions = [
  { label: '화베이', value: 'north' },
  { label: '화둥', value: 'east' },
  { label: '화난', value: 'south' },
]
const disabledOptions = [
  { label: '화베이', value: 'north', disabled: true },
  { label: '화둥', value: 'east' },
  { label: '화난', value: 'south' },
]
</script>

<template>
  <!-- 지우기 가능 -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="지역을 선택하세요" />
  <!-- 비활성화됨 -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="비활성화됨" />
</template>

<script>
import { LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhSelect },
  data() {
    return {
      selectedRegion: '',
      selectedDisabled: 'north',
      regionOptions: [
        { label: '화베이', value: 'north' },
        { label: '화둥', value: 'east' },
        { label: '화난', value: 'south' },
      ],
      disabledOptions: [
        { label: '화베이', value: 'north', disabled: true },
        { label: '화둥', value: 'east' },
        { label: '화난', value: 'south' },
      ],
    }
  },
}
</script>

<template>
  <!-- 지우기 가능 -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="지역을 선택하세요" />
  <!-- 비활성화됨 -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="비활성화됨" />
</template>

커스텀 테마

셀렉트에 커스텀 테마 색상을 적용합니다.

青花瓷 (ceramic blue) 테마

베이징⌄

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhSelect } from '@lh-ui/vue3'

const selectedTheme = ref('beijing')
const cityOptions = [
  { label: '베이징', value: 'beijing' },
  { label: '상하이', value: 'shanghai' },
]
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- 청화자 테마 -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="선택하세요" />
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSelect },
  data() {
    return {
      selectedTheme: 'beijing',
      cityOptions: [
        { label: '베이징', value: 'beijing' },
        { label: '상하이', value: 'shanghai' },
      ],
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- 청화자 테마 -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="선택하세요" />
  </LhConfigProvider>
</template>

더 많은 테마는 테마 커스터마이징을 참고하세요.

다국어

셀렉트는 LhConfigProvider와 t 함수로 다국어를 구현할 수 있습니다.

다국어

베이징⌄

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSelect, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const selected = ref('beijing')
const cityOptions = [
  { label: '베이징', value: 'beijing' },
  { label: '상하이', value: 'shanghai' },
  { label: '선전', value: 'shenzhen' },
]
const messages = computed(() => (locale.value === 'zh-CN' ? zhCN : enUS))
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- 도시 선택 -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- 언어 전환 -->
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhSelect, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSelect, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      selected: 'beijing',
      cityOptions: [
        { label: '베이징', value: 'beijing' },
        { label: '상하이', value: 'shanghai' },
        { label: '선전', value: 'shenzhen' },
      ],
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- 도시 선택 -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- 언어 전환 -->
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

크기

크기

옵션 1⌄

옵션 1⌄

옵션 1⌄

<script setup lang="ts">
import { ref } from 'vue'
import { LhSelect } from '@lh-ui/vue3'

const demoSizeSmall = ref('a')
const demoSizeMedium = ref('a')
const demoSizeLarge = ref('a')
const sizeOptions = [
  { label: '옵션 1', value: 'a' },
  { label: '옵션 2', value: 'b' },
  { label: '옵션 3', value: 'c' },
]
</script>

<template>
  <!-- small -->
  <LhSelect v-model="demoSizeSmall" :options="sizeOptions" size="small" placeholder="small" />
  <!-- medium -->
  <LhSelect v-model="demoSizeMedium" :options="sizeOptions" size="medium" placeholder="medium" />
  <!-- large -->
  <LhSelect v-model="demoSizeLarge" :options="sizeOptions" size="large" placeholder="large" />
</template>

<script>
import { LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhSelect },
  data() {
    return {
      demoSizeSmall: 'a',
      demoSizeMedium: 'a',
      demoSizeLarge: 'a',
      sizeOptions: [
        { label: '옵션 1', value: 'a' },
        { label: '옵션 2', value: 'b' },
        { label: '옵션 3', value: 'c' },
      ],
    }
  },
}
</script>

<template>
  <!-- small -->
  <LhSelect v-model="demoSizeSmall" :options="sizeOptions" size="small" placeholder="small" />
  <!-- medium -->
  <LhSelect v-model="demoSizeMedium" :options="sizeOptions" size="medium" placeholder="medium" />
  <!-- large -->
  <LhSelect v-model="demoSizeLarge" :options="sizeOptions" size="large" placeholder="large" />
</template>

접근성과 마운트 컨테이너

aria-label은 접근성 설명에 사용하고, name은 네이티브 폼 이름이며, popper-container는 드롭다운 패널의 마운트 컨테이너를 지정합니다.

접근성과 마운트 컨테이너

aria-label과 name⌄

body에 마운트⌄

<script setup lang="ts">
import { ref } from 'vue'
import { LhSelect } from '@lh-ui/vue3'

const demoA11y = ref('')
const demoContainer = ref('')
const sizeOptions = [
  { label: '옵션 1', value: 'a' },
  { label: '옵션 2', value: 'b' },
  { label: '옵션 3', value: 'c' },
]
</script>

<template>
  <!-- aria-label과 name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="도시를 선택하세요" name="city" placeholder="aria-label과 name" />
  <!-- body에 마운트 -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="body에 마운트" />
</template>

<script>
import { LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhSelect },
  data() {
    return {
      demoA11y: '',
      demoContainer: '',
      sizeOptions: [
        { label: '옵션 1', value: 'a' },
        { label: '옵션 2', value: 'b' },
        { label: '옵션 3', value: 'c' },
      ],
    }
  },
}
</script>

<template>
  <!-- aria-label과 name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="도시를 선택하세요" name="city" placeholder="aria-label과 name" />
  <!-- body에 마운트 -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="body에 마운트" />
</template>

Select API

Props

프로퍼티	설명	타입	기본값
modelValue	현재 값	unknown	—
options	옵션 목록	[LhSelectOption](#type-LhSelectOption)[]	() => []
placeholder	플레이스홀더 텍스트(넘기지 않으면 언어 팩 select.placeholder 사용, 中文「请选择」)	string	''
disabled	비활성화 여부	boolean	false
clearable	지우기 버튼 표시 여부	boolean	false
size	셀렉트 크기	"small" | "medium" | "large"	'medium'
name	네이티브 폼 이름	string	—
ariaLabel	보이는 라벨이 없을 때의 보조 텍스트	string	—
popperContainer	드롭다운 패널 마운트 컨테이너	string | HTMLElement	'body'
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Events

이벤트	설명	매개변수
update:modelValue	값이 변경될 때	value: unknown
change	선택이 변경될 때	value, option
clear	지우기 클릭	—

Option

type LhSelectOption = {
  label: string
  value: unknown
  disabled?: boolean
}

ArrowUp, ArrowDown으로 하이라이트 항목을 이동하고, Enter로 선택을 확정하며, Escape로 드롭다운 메뉴를 닫습니다.

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/select/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):

LhSelectSize

export type LhSelectSize = 'small' | 'medium' | 'large'

LhSelectProps

export interface LhSelectProps {
  modelValue?: unknown
  options?: LhSelectOption[]
  placeholder?: string
  disabled?: boolean
  clearable?: boolean
  size?: LhSelectSize
  name?: string
  ariaLabel?: string
  popperContainer?: 'body' | HTMLElement | string
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhSelectOption _{(출처: @lh-ui/share/core/select)}

export interface LhSelectOption {
  label: string
  value: unknown
  disabled?: boolean
}

Slots

슬롯	설명	기본 콘텐츠
empty	옵션이 없을 때 드롭다운 패널의 커스텀 빈 상태 콘텐츠	언어 팩 select.noData(中文「暂无数据」)