InputNumber (compteur)

Champ de saisie numérique. Prend en charge les bornes min/max, le pas (step) et la contrainte de multiple (stepStrictly), le nombre de décimales (precision), l'affichage des boutons +/− et trois tailles ; les touches ↑/↓ du clavier incrémentent également.

Compteur

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="count" :min="1" :max="99" :step="1" placeholder="Quantité" name="count" />
      <span class="demo-note">min=1 max=99, valeur contrôlée : {{ count }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="price" :step="0.5" :precision="2" :min="0" />
      <span class="demo-note">step=0.5 precision=2 : {{ price }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="strict" :step="10" step-strictly />
      <span class="demo-note">stepStrictly : à la perte de focus, la valeur s'aligne sur un multiple de 10</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="noControls" :controls="false" placeholder="Pas d'incrément" />
      <LhInputNumber v-model="disabledVal" disabled />
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="sized" size="small" />
      <LhInputNumber v-model="sized" size="medium" />
      <LhInputNumber v-model="sized" size="large" />
    </div>
    <p class="demo-note">controls=false masque les boutons +/− ; lorsque le champ a le focus, les flèches directionnelles (↑/↓) incrémentent également.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    count: 6,
    price: 12.5,
    strict: 20,
    noControls: undefined,
    disabledVal: 3,
    sized: 8,
  }),
}
</script>

Props

Propriété	Description	Type	Valeur par défaut
v-model	Valeur liée (model : modelValue/input)	number \| null	null
min	Valeur minimale (les valeurs inférieures sont ramenées à min)	number	—
max	Valeur maximale (les valeurs supérieures sont ramenées à max)	number	—
step	Pas d'incrémentation	number	1
stepStrictly	La valeur saisie doit être un multiple de step (alignement à la perte de focus)	boolean	false
precision	Nombre de décimales (arrondi en cas de dépassement)	number	—
controls	Affiche les boutons +/−	boolean	true
size	Taille	'small' \| 'medium' \| 'large'	'medium'
disabled	Désactivé	boolean	false
placeholder	Texte du placeholder	string	—
name	Attribut name natif	string	—
sx	Raccourci de mise en page sx	—	—

Events

Événement	Description	Paramètres de rappel
input	Événement v-model	(val)
change	Déclenché lorsque la valeur change	(val)

Accessibilité

Les boutons +/− sont des button natifs ; les touches ↑/↓ incrémentent lorsque le champ a le focus ; placé dans un LhFormItem, le composant reçoit aria-invalid en cas d'échec de validation.