InputNumber (contador)

Campo de entrada numérica. Admite los límites min/max, el incremento step y la restricción de múltiplos con stepStrictly, los decimales con precision, la activación de los botones de suma y resta, y tres tamaños; las teclas ↑/↓ del teclado también incrementan y decrementan.

Contador

<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="Cantidad" name="count" />
      <span class="demo-note">min=1 max=99, valor controlado: {{ 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: al perder el foco, el valor se ajusta a un múltiplo de 10</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="noControls" :controls="false" placeholder="Sin controles" />
      <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 oculta los botones de suma y resta; con el campo enfocado, las teclas de flecha (↑/↓) también incrementan y decrementan.</p>
  </div>
</template>

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

Props

Propiedad	Descripción	Tipo	Predeterminado
v-model	Valor enlazado (model: modelValue/input)	number \| null	null
min	Valor mínimo (por debajo se ajusta a min)	number	—
max	Valor máximo (por encima se ajusta a max)	number	—
step	Valor del incremento	number	1
stepStrictly	El valor introducido debe ser múltiplo de step (se ajusta al perder el foco)	boolean	false
precision	Número de decimales (si se excede, se redondea)	number	—
controls	Mostrar los botones de suma y resta	boolean	true
size	Tamaño	'small' \| 'medium' \| 'large'	'medium'
disabled	Deshabilitar	boolean	false
placeholder	Texto de marcador de posición	string	—
name	Atributo name nativo	string	—
sx	Propiedad de diseño rápido sx	—	—

Eventos

Evento	Descripción	Parámetro de callback
input	Evento de v-model	(val)
change	Se dispara al cambiar el valor	(val)

Accesibilidad

Los botones de suma y resta son elementos button nativos; con el campo enfocado, ↑/↓ incrementan y decrementan; colocado dentro de LhFormItem, adquiere aria-invalid si falla la validación.