## 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. ```html <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`. ```html <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. ```html <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. ```html <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. ```html <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 ```html <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. ```html <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 | - |