Selector

LhSelect sirve para elegir un valor de una lista de opciones; admite opciones deshabilitadas, borrado y operación con teclado.

Uso básico

Uso básico

Pekín⌄

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

const selectedCity = ref('beijing')
const cityOptions = [
  { label: 'Pekín', value: 'beijing' },
  { label: 'Shanghái', value: 'shanghai' },
  { label: 'Shenzhen', value: 'shenzhen' },
]
</script>

<template>
  <!-- Uso básico -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="Selecciona una ciudad" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      selectedCity: 'beijing',
      cityOptions: [
        { label: 'Pekín', value: 'beijing' },
        { label: 'Shanghái', value: 'shanghai' },
        { label: 'Shenzhen', value: 'shenzhen' },
      ],
    }
  },
}
</script>

<template>
  <!-- Uso básico -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="Selecciona una ciudad" />
</template>

Borrable y deshabilitado

Borrable y deshabilitado

Selecciona una región⌄

China septentrional⌄

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

const selectedRegion = ref('')
const selectedDisabled = ref('north')
const regionOptions = [
  { label: 'China septentrional', value: 'north' },
  { label: 'China oriental', value: 'east' },
  { label: 'China meridional', value: 'south' },
]
const disabledOptions = [
  { label: 'China septentrional', value: 'north', disabled: true },
  { label: 'China oriental', value: 'east' },
  { label: 'China meridional', value: 'south' },
]
</script>

<template>
  <!-- Borrable -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="Selecciona una región" />
  <!-- Deshabilitado -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="Deshabilitado" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      selectedRegion: '',
      selectedDisabled: 'north',
      regionOptions: [
        { label: 'China septentrional', value: 'north' },
        { label: 'China oriental', value: 'east' },
        { label: 'China meridional', value: 'south' },
      ],
      disabledOptions: [
        { label: 'China septentrional', value: 'north', disabled: true },
        { label: 'China oriental', value: 'east' },
        { label: 'China meridional', value: 'south' },
      ],
    }
  },
}
</script>

<template>
  <!-- Borrable -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="Selecciona una región" />
  <!-- Deshabilitado -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="Deshabilitado" />
</template>

Tema personalizado

Aplica un color de tema personalizado al selector.

Tema porcelana azul y blanco

Pekín⌄

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

const selectedTheme = ref('beijing')
const cityOptions = [
  { label: 'Pekín', value: 'beijing' },
  { label: 'Shanghái', value: 'shanghai' },
]
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- Tema porcelana azul y blanco -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="Selecciona" />
  </LhConfigProvider>
</template>

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

export default {
  components: { LhConfigProvider, LhSelect },
  data() {
    return {
      selectedTheme: 'beijing',
      cityOptions: [
        { label: 'Pekín', value: 'beijing' },
        { label: 'Shanghái', value: 'shanghai' },
      ],
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- Tema porcelana azul y blanco -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="Selecciona" />
  </LhConfigProvider>
</template>

Para más temas, consulta Personalización de temas.

Internacionalización

El selector se puede internacionalizar mediante LhConfigProvider y la función t.

Internacionalización

Pekín⌄

<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: 'Pekín', value: 'beijing' },
  { label: 'Shanghái', value: 'shanghai' },
  { label: 'Shenzhen', value: 'shenzhen' },
]
const messages = computed(() => (locale.value === 'zh-CN' ? zhCN : enUS))
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- Selección de ciudad -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- Cambio de idioma -->
    <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: 'Pekín', value: 'beijing' },
        { label: 'Shanghái', value: 'shanghai' },
        { label: 'Shenzhen', value: 'shenzhen' },
      ],
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- Selección de ciudad -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- Cambio de idioma -->
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Tamaño

Tamaño

Opción 1⌄

Opción 1⌄

Opción 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: 'Opción 1', value: 'a' },
  { label: 'Opción 2', value: 'b' },
  { label: 'Opción 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: 'Opción 1', value: 'a' },
        { label: 'Opción 2', value: 'b' },
        { label: 'Opción 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>

Accesibilidad y contenedor de montaje

aria-label aporta la descripción de accesibilidad, name es el nombre del formulario nativo y popper-container especifica el contenedor de montaje del panel desplegable.

Accesibilidad y contenedor de montaje

aria-label y name⌄

Montar en body⌄

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

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

<template>
  <!-- aria-label y name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="Selecciona una ciudad" name="city" placeholder="aria-label y name" />
  <!-- Montar en body -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="Montar en body" />
</template>

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

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

<template>
  <!-- aria-label y name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="Selecciona una ciudad" name="city" placeholder="aria-label y name" />
  <!-- Montar en body -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="Montar en body" />
</template>

Select API

Props

Prop	Descripción	Tipo	Predeterminado
modelValue	Valor actual	unknown	—
options	Lista de opciones	[LhSelectOption](#type-LhSelectOption)[]	() => []
placeholder	Texto marcador de posición (si no se pasa, se toma del paquete de idioma select.placeholder, en chino 请选择)	string	''
disabled	Si se deshabilita	boolean	false
clearable	Si se muestra el botón de borrado	boolean	false
size	Tamaño del selector	"small" | "medium" | "large"	'medium'
name	—	string	—
ariaLabel	Texto de apoyo cuando no hay etiqueta visible	string	—
popperContainer	—	string | HTMLElement	'body'
sx	Props de maquetación rápida sx	LhSxProps	—

Eventos

Evento	Descripción	Parámetro
update:modelValue	El valor cambia	value: unknown
change	Cambia la selección	value, option
clear	Se pulsa el borrado	—

Option

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

Admite ArrowUp y ArrowDown para mover el elemento resaltado, Enter para confirmar la selección y Escape para cerrar el menú desplegable.

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/select/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

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
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhSelectOption _{(de @lh-ui/share/core/select)}

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

Slots

Slot	Descripción	Contenido predeterminado
empty	Contenido de estado vacío personalizado para el panel desplegable cuando no hay opciones	Paquete de idioma select.noData (en chino, 暂无数据)