element-plus/website/docs/es/input-number.md

InputNumber

Input de valores numéricos con un rango personalizable.

Uso básico

:::demo Vincule una variable con v-model en el elemento <el-input-number> y estará listo.

<template>
  <el-input-number
    v-model="num"
    @change="handleChange"
    :min="1"
    :max="10"
  ></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1,
      }
    },
    methods: {
      handleChange(value) {
        console.log(value)
      },
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const num = ref(1);
      const handleChange = (value) => {
        console.log(value);
      };
      return {
        num,
        handleChange,
      };
    },
  });

</setup>
-->

:::

Disabled

:::demo El atributo disabled acepta un valor boolean, y si el valor es true, el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo min para establecer el valor mínimo y un valor max para establecer el valor máximo. Por defecto, el valor mínimo es 0.

<template>
  <el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1,
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const num = ref(1);
      return {
        num,
      };
    },
  });

</setup>
-->

:::

Steps

Le permite definir el nivel de incremento de los saltos.

:::demo Añada el atributo step para establecer el salto.

<template>
  <el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 5,
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const num = ref(5);
      return {
        num,
      };
    },
  });

</setup>
-->

:::

Step estrictamente

:::demo El atributo step-strictly acepta boolean. Si este atributo es true, el valor de entrada sólo puede ser múltiplo de step.

<template>
  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 2,
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const num = ref(2);
      return {
        num,
      };
    },
  });

</setup>
-->

:::

Precisión

:::demo El atributo precision aplica presicion al valor del value.

<template>
  <el-input-number
    v-model="num"
    :precision="2"
    :step="0.1"
    :max="10"
  ></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1,
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const num = ref(1);
      return {
        num,
      };
    },
  });

</setup>
-->

:::

:::tip El valor de precision debe ser un numero entero positivo que no debe ser inferior a los decimales del step.

:::

Tamaño

Utilice el atributo size para establecer tamaños adicionales con medium, small o mini.

:::demo

<template>
  <el-input-number v-model="num1"></el-input-number>
  <el-input-number size="medium" v-model="num2"></el-input-number>
  <el-input-number size="small" v-model="num3"></el-input-number>
  <el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num1: 1,
        num2: 1,
        num3: 1,
        num4: 1,
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const num1 = ref(1);
      const num2 = ref(2);
      const num3 = ref(3);
      const num4 = ref(4);
      return {
        num1,
        num2,
        num3,
        num4,
      };
    },
  });

</setup>
-->

:::

Posición de los controles

:::demo Establezca controls-position para decidir la posición de los botones de control.

<template>
  <el-input-number
    v-model="num"
    controls-position="right"
    @change="handleChange"
    :min="1"
    :max="10"
  ></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1,
      }
    },
    methods: {
      handleChange(value) {
        console.log(value)
      },
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const num = ref(1);
      const handleChange = (value) => {
        console.log(value);
      };
      return {
        num,
        handleChange,
      };
    },
  });

</setup>
-->

:::

Atributos

Atributo	Descripción	Tipo	Valores aceptados	Por defecto
model-value / v-model	valor vinculado	number / undefined	—	0
min	el valor mínimo permitido	number	—	-Infinity
max	el valor maximo permitido	number	—	Infinity
step	incremento (salto)	number	—	1
step-strictly	si el valor del input puede ser solo un multiplo de step	boolean	—	false
precision	precisión del valor del input	number	—	—
size	tamaño del componente	string	large/medium/small/mini	large
disabled	si el componente esta deshabilitado	boolean	—	false
controls	si se activan los botones de control	boolean	—	true
controls-position	posición de los botones de control	string	right	-
name	lo mismo que name en un input nativo	string	—	—
label	texto de la etiqueta	string	—	—
placeholder	placeholder in input	string	-	-

Eventos

Nombre	Descripción	Parámetros
change	se produce cuando el valor cambia	currentValue, oldValue
blur	se produce cuando el componente pierde el foco	(event: Event)
focus	se produce cuando el componente obtiene el foco	(event: Event)

Métodos

Método	Descripción	Parámetro
focus	coloca el foco en el elemento actual	-
select	selecciona el contenido del input	-