Sélecteur

LhSelect permet de choisir une valeur dans une liste d'options, avec support des options désactivées, de l'effacement et de la navigation clavier.

Utilisation de base

Utilisation de base

Pékin⌄

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

const selectedCity = ref('beijing')
const cityOptions = [
  { label: 'Pékin', value: 'beijing' },
  { label: 'Shanghai', value: 'shanghai' },
  { label: 'Shenzhen', value: 'shenzhen' },
]
</script>

<template>
  <!-- Utilisation de base -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="Veuillez choisir une ville" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      selectedCity: 'beijing',
      cityOptions: [
        { label: 'Pékin', value: 'beijing' },
        { label: 'Shanghai', value: 'shanghai' },
        { label: 'Shenzhen', value: 'shenzhen' },
      ],
    }
  },
}
</script>

<template>
  <!-- Utilisation de base -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="Veuillez choisir une ville" />
</template>

Effaçable et désactivé

Effaçable et désactivé

Veuillez choisir une région⌄

Chine du Nord⌄

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

const selectedRegion = ref('')
const selectedDisabled = ref('north')
const regionOptions = [
  { label: 'Chine du Nord', value: 'north' },
  { label: "Chine de l'Est", value: 'east' },
  { label: 'Chine du Sud', value: 'south' },
]
const disabledOptions = [
  { label: 'Chine du Nord', value: 'north', disabled: true },
  { label: "Chine de l'Est", value: 'east' },
  { label: 'Chine du Sud', value: 'south' },
]
</script>

<template>
  <!-- Effaçable -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="Veuillez choisir une région" />
  <!-- Désactivé -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="Désactivé" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      selectedRegion: '',
      selectedDisabled: 'north',
      regionOptions: [
        { label: 'Chine du Nord', value: 'north' },
        { label: "Chine de l'Est", value: 'east' },
        { label: 'Chine du Sud', value: 'south' },
      ],
      disabledOptions: [
        { label: 'Chine du Nord', value: 'north', disabled: true },
        { label: "Chine de l'Est", value: 'east' },
        { label: 'Chine du Sud', value: 'south' },
      ],
    }
  },
}
</script>

<template>
  <!-- Effaçable -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="Veuillez choisir une région" />
  <!-- Désactivé -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="Désactivé" />
</template>

Thème personnalisé

Appliquez une couleur de thème personnalisée au sélecteur.

Thème porcelaine bleue

Pékin⌄

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

const selectedTheme = ref('beijing')
const cityOptions = [
  { label: 'Pékin', value: 'beijing' },
  { label: 'Shanghai', value: 'shanghai' },
]
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- Thème porcelaine bleue -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="Veuillez choisir" />
  </LhConfigProvider>
</template>

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

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

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- Thème porcelaine bleue -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="Veuillez choisir" />
  </LhConfigProvider>
</template>

Pour plus de thèmes, consultez Personnalisation du thème.

Internationalisation

Le sélecteur peut être internationalisé via LhConfigProvider et la fonction t.

Internationalisation

Pékin⌄

<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: 'Pékin', value: 'beijing' },
  { label: 'Shanghai', value: 'shanghai' },
  { label: 'Shenzhen', value: 'shenzhen' },
]
const messages = computed(() => (locale.value === 'zh-CN' ? zhCN : enUS))
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- Sélection de la ville -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- Changement de langue -->
    <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: 'Pékin', value: 'beijing' },
        { label: 'Shanghai', value: 'shanghai' },
        { label: 'Shenzhen', value: 'shenzhen' },
      ],
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- Sélection de la ville -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- Changement de langue -->
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Tailles

Tailles

Option 1⌄

Option 1⌄

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

Accessibilité et conteneur de montage

aria-label fournit une description d'accessibilité, name est le nom natif du formulaire, et popper-container indique le conteneur de montage du panneau déroulant.

Accessibilité et conteneur de montage

aria-label et name⌄

Monté sur body⌄

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

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

<template>
  <!-- aria-label et name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="Veuillez choisir une ville" name="city" placeholder="aria-label et name" />
  <!-- Monté sur body -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="Monté sur body" />
</template>

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

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

<template>
  <!-- aria-label et name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="Veuillez choisir une ville" name="city" placeholder="aria-label et name" />
  <!-- Monté sur body -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="Monté sur body" />
</template>

API Select

Props

Prop	Description	Type	Valeur par défaut
modelValue	Valeur actuelle	unknown	—
options	Liste des options	[LhSelectOption](#type-LhSelectOption)[]	() => []
placeholder	Texte d'occupation (en l'absence de valeur, utilise le pack de langue select.placeholder, en chinois « 请选择 »)	string	''
disabled	Désactivé ou non	boolean	false
clearable	Afficher ou non le bouton d'effacement	boolean	false
size	Taille du sélecteur	"small" | "medium" | "large"	'medium'
name	—	string	—
ariaLabel	Texte d'aide en l'absence de libellé visible	string	—
popperContainer	—	string | HTMLElement	'body'
sx	Props de mise en page sx	LhSxProps	—

Events

Événement	Description	Paramètre
update:modelValue	La valeur change	value: unknown
change	La sélection change	value, option
clear	Clic sur effacer	—

Option

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

Les touches ArrowUp et ArrowDown déplacent le surlignage, Entrée confirme la sélection, et Échap ferme le menu déroulant.

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/select/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

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 mise en page sx */
  sx?: LhSxProps
}

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

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

Slots

Slot	Description	Contenu par défaut
empty	Contenu personnalisé de l'état vide du panneau déroulant lorsque les options sont épuisées	Pack de langue select.noData (en chinois « 暂无数据 »)