FxInputNumber Counter

Only allows standard numeric values to be entered, with definable ranges.

Parameters

Parameter	Description	Type	Optional Values	Default Value
value / v-model	Binding value	number	—	0
min	Minimum allowed value	number	—	-Infinity
max	Maximum allowed value	number	—	Infinity
step	Incremental step	number	—	1
step-strictly	Whether input must be multiples of step	boolean	—	false
precision	Precision of value	number	—	—
size	Size of counter	string	large, small	—
disabled	Whether counter is disabled	boolean	—	false
controls	Whether to use control buttons	boolean	—	true
controls-position	Position of control buttons	string	right	—
name	Native attribute	string	—	—
label	Label text associated with input	string	—	—
placeholder	Default placeholder for input	string	—	—

Events

Event Name	Description	Callback Parameters
change	Triggered when binding value changes	currentValue, oldValue
blur	Triggered when Input loses focus	(event: Event)
focus	Triggered when Input gains focus	(event: Event)

Methods

Method	Description	Parameters
focus	Focuses the input	-
select	Selects text in input	—

Basic Usage

To use it, simply bind a variable to v-model in fx-input-number element. The initial value of the variable will be the default value.

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

Expand Copy Copy

Disabled State

The disabled attribute accepts a Boolean. Set it to true to disable the entire component. To control value within a specific range, set min and max attributes. Without these, the minimum value defaults to 0.

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

Expand Copy Copy

Step

Allows defining incremental/decremental step control

Set step attribute to control step size (accepts a Number).

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

Expand Copy Copy

Strict Step

The step-strictly attribute accepts a Boolean. When set to true, only multiples of the step can be entered.

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

Expand Copy Copy

Precision

Set precision attribute to control numeric precision (accepts a Number).

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

Expand Copy Copy

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

Sizes

Additional medium, small, and mini sized numeric input boxes

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

Expand Copy Copy

Button Position

Set controls-position attribute to control button position.

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

Expand Copy Copy