Champ de saisie

Composant de champ de saisie, prenant en charge la saisie de texte, les mots de passe, le comptage des caractères, etc.

Utilisation de base

Valeur actuelle :

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <!-- Champ de saisie de base -->
  <LhInput v-model="value" placeholder="Saisir du contenu" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <!-- Champ de saisie de base -->
  <LhInput v-model="value" placeholder="Saisir du contenu" />
</template>

Différents types

vue

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
const password = ref('')
const clearable = ref('Pré-rempli')
</script>

<template>
  <LhInput v-model="text" placeholder="Saisie de texte" />
  <LhInput v-model="password" type="password" placeholder="Saisie du mot de passe" show-password />
  <LhInput v-model="clearable" placeholder="Saisie effaçable" clearable />
</template>

vue

<script>
export default {
  data() {
    return {
      text: '',
      password: '',
      clearable: 'Pré-rempli',
    }
  },
}
</script>

<template>
  <LhInput v-model="text" placeholder="Saisie de texte" />
  <LhInput v-model="password" type="password" placeholder="Saisie du mot de passe" show-password />
  <LhInput v-model="clearable" placeholder="Saisie effaçable" clearable />
</template>

État désactivé

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" disabled placeholder="Champ désactivé" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" disabled placeholder="Champ désactivé" />
</template>

Comptage des caractères

0/10

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="10 caractères maximum" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="10 caractères maximum" />
</template>

Slots

vue

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

Thème personnalisé

vue

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

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <!-- Personnaliser les variables de thème via theme-vars -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="Champ porcelaine bleue" />
  </LhConfigProvider>
</template>

vue

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

export default {
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <!-- Personnaliser les variables de thème via theme-vars -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="Champ porcelaine bleue" />
  </LhConfigProvider>
</template>

Mise en page sx

Définissez rapidement l'espacement via la prop sx, sans écrire de CSS supplémentaire.

vue

<script setup lang="ts">
</script>

<template>
  <!-- Marge supérieure 2 -->
  <LhInput placeholder="Marge supérieure 2" :sx="{ mt: 2 }" />
  <!-- Espacement horizontal 1, marge inférieure 3 -->
  <LhInput placeholder="Espacement horizontal 1, marge inférieure 3" :sx="{ mx: 1, mb: 3 }" />
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Marge supérieure 2 -->
  <LhInput placeholder="Marge supérieure 2" :sx="{ mt: 2 }" />
  <!-- Espacement horizontal 1, marge inférieure 3 -->
  <LhInput placeholder="Espacement horizontal 1, marge inférieure 3" :sx="{ mx: 1, mb: 3 }" />
</template>

sx repose sur une base de 8px : mt: 2 → marginTop: 16px. La liste complète des props se trouve dans Mise en page sx.

Internationalisation

vue

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

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <!-- Injection du paquet de langue via ConfigProvider -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">Changer de langue</LhButton>
  </LhConfigProvider>
</template>

vue

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

export default {
  components: { LhConfigProvider, LhInput, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <!-- Injection du paquet de langue via ConfigProvider -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="toggleLocale">Changer de langue</LhButton>
  </LhConfigProvider>
</template>

Tailles et lecture seule

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="Champ en lecture seule" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="Champ en lecture seule" />
</template>

Icônes de préfixe et de suffixe

Les props prefix-icon / suffix-icon définissent les icônes de préfixe et de suffixe ; elles acceptent un nom d'icône intégré LhIcon (ex. search, date).

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="Icône de préfixe" />
  <LhInput v-model="value" suffix-icon="date" placeholder="Icône de suffixe" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="Icône de préfixe" />
  <LhInput v-model="value" suffix-icon="date" placeholder="Icône de suffixe" />
</template>

Attributs natifs et hauteur automatique

Les attributs natifs autocomplete, native-type, autofocus, minlength, etc. sont transmis au champ interne ; autosize permet à un textarea d'adapter sa hauteur au contenu.

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="Mise au point automatique" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Hauteur automatique" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="Mise au point automatique" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Hauteur automatique" />
</template>

API Input

Props

Prop	Description	Type	Valeur par défaut
modelValue	Valeur liée	`string`	—
type	Type de champ	`"number" \| "text" \| "textarea" \| "password" \| "email" \| "url" \| "tel" \| "date" \| "time"`	`'text'`
size	—	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	État désactivé	`boolean`	`false`
readonly	Lecture seule	`boolean`	`false`
placeholder	Texte de remplacement	`string`	—
maxlength	Longueur maximale de saisie	`number`	—
minlength	—	`number`	—
showWordLimit	Afficher le comptage des caractères	`boolean`	`false`
clearable	Effaçable	`boolean`	`false`
prefixIcon	Nom de l'icône de préfixe (icône intégrée LhIcon)	`LhIconName`	—
suffixIcon	Nom de l'icône de suffixe (icône intégrée LhIcon)	`LhIconName`	—
autofocus	—	`boolean`	`false`
autocomplete	—	`string`	—
nativeType	—	`string`	—
autosize	—	`boolean \| { minRows?: number; maxRows?: number; }`	`false`
resize	—	`"none" \| "both" \| "horizontal" \| "vertical"`	`'vertical'`
name	—	`string`	—
rows	—	`number`	—
tabindex	—	`string \| number`	—
form	—	`string`	—
inputStyle	—	`{ [x: string]: string; }`	—
label	—	`string`	—
themeVars	Variables de thème au niveau du composant, prime sur la configuration de ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Motif d'arrière-plan au niveau du composant, prime sur la configuration de ConfigProvider	`string`	—
sx	Props de mise en page sx	`LhSxProps`	—

Events

Événement	Description	Callback
update:modelValue	Événement de mise à jour de la valeur	`(value: string)`
input	Événement de saisie	`(value: string)`
change	Événement de changement de valeur	`(value: string)`
focus	Événement de prise de focus	`(event: FocusEvent)`
blur	Événement de perte de focus	`(event: FocusEvent)`
clear	Événement d'effacement	—
keydown	Événement keydown natif	`(event: KeyboardEvent)`

Slots

Slot	Description
prefix	Contenu en tête de champ
suffix	Contenu en fin de champ

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/input/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) :

LhInputType

export type LhInputType = typeof LH_INPUT_TYPE_CONST[keyof typeof LH_INPUT_TYPE_CONST]

LhInputSize

/**
 * Taille du Input
 */
export type LhInputSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhInputState

export type LhInputState = typeof LH_INPUT_STATE_CONST[keyof typeof LH_INPUT_STATE_CONST]

LhInputProps

/**
 * Interface des props du Input
 */
export interface LhInputProps {
  modelValue?: string
  type?: LhInputType
  size?: LhInputSize
  disabled?: boolean
  readonly?: boolean
  placeholder?: string
  maxlength?: number
  minlength?: number
  showWordLimit?: boolean
  clearable?: boolean
  /** Nom de l'icône de préfixe (icône intégrée LhIcon, ex. `search`) */
  prefixIcon?: LhIconName
  /** Nom de l'icône de suffixe (icône intégrée LhIcon, ex. `date`) */
  suffixIcon?: LhIconName
  autofocus?: boolean
  autocomplete?: string
  nativeType?: string
  autosize?: boolean | { minRows?: number; maxRows?: number }
  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
  name?: string
  rows?: number
  tabindex?: number | string
  form?: string
  inputStyle?: Record<string, string>
  label?: string
  /** Variables de thème au niveau du composant, prime sur la configuration de ConfigProvider */
  themeVars?: Record<string, string>
  /** Motif d'arrière-plan au niveau du composant, prime sur la configuration de ConfigProvider */
  bgPattern?: string
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhIconName _{(provenant de @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Champ de saisie ​

Utilisation de base ​

Différents types ​

État désactivé ​

Comptage des caractères ​

Slots ​

Thème personnalisé ​

Mise en page sx ​

Internationalisation ​

Tailles et lecture seule ​

Icônes de préfixe et de suffixe ​

Attributs natifs et hauteur automatique ​

API Input ​

Props ​

Events ​

Slots ​

Définitions de types ​

Champ de saisie

Utilisation de base

Différents types

État désactivé

Comptage des caractères

Slots

Thème personnalisé

Mise en page sx

Internationalisation

Tailles et lecture seule

Icônes de préfixe et de suffixe

Attributs natifs et hauteur automatique

API Input

Props

Events

Slots

Définitions de types