element/examples/docs/es/input-number.md
Zhi Cun aa9851ee74 Chore: upgrade to webpack@4 (#14173)
* Chore: upgrade webpack@4

* Chore: upgrade to webpack@4

* Chore: add babel-preset-stage-2

* Chore: fix test case

* Chore: upgrade webpack@4

* Docs: update docs

* Docs: update docs

* Chore: fix coveralls

* Chore: update yarn.lock
2019-01-23 11:34:19 +08:00

5.4 KiB

InputNumber

Input de valores numéricos con un rango personalizable.

Uso básico

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

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

:::

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="num2" :disabled="true"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num2: 1
      }
    }
  };
</script>

:::

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="num3" :step="2"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num3: 5
      }
    }
  };
</script>

:::

Precision

:::demo Add precision attribute to set the precision of input value.

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

:::

:::tip The value of precision must be a non negative integer and should not be less than the decimal places of step. :::

Tamaño

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

:::demo

<template>
  <el-input-number v-model="num4"></el-input-number>
    <el-input-number size="medium" v-model="num5"></el-input-number>
    <el-input-number size="small" v-model="num6"></el-input-number>
    <el-input-number size="mini" v-model="num7"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num4: 1,
        num5: 1,
        num6: 1,
        num7: 1
      }
    }
  };
</script>

:::

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="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num8: 1
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

:::

Atributos

Atributo Descripción Tipo Valores aceptados Por defecto
value / v-model valor vinculado number 0
min el valor mínimo permitido number -Infinity
max el valor maximo permitido number Infinity
step incremento (salto) number 1
precision precisión del valor del input number
size tamaño del componente string large/small
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 value after change
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 -