Number

Input numerical values with a customizable range.

Basic usage

Bind a variable to v-model in <el-input-number> element and you are set.

Tips

When inputting invalid string to the input box, input value will emit NaN to the upper layer as result of error

Viwer Source

Code

```vue
<template>
  <FieldNumber :num="num" :min="1" :max="10" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(1)
</script>

```

:::

Disabled

The disabled attribute accepts a boolean, and if the value is true, the component is disabled. If you just need to control the value within a range, you can add min attribute to set the minimum value and max to set the maximum value. By default, the minimum value is 0.

Viwer Source

Code

```vue
<template>
  <FieldNumber :num="num" :min="1" :max="10" :disabled="true" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(1)
</script>
```

:::

Steps

Allows you to define incremental steps.

Add step attribute to set the step.

Viwer Source

Code

```vue
<template>
  <FieldNumber :num="num" :min="1" :max="10" :step="2" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(1)
</script>
```

:::

Step strictly

The step-strictly attribute accepts a boolean. if this attribute is true, input value can only be multiple of step.

Viwer Source

Code

```vue
<template>
  <FieldNumber :num="num" :min="1" :max="10" :step="2" :stepStrictly="true" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(1)
</script>
```

:::

Precision

Add precision attribute to set the precision of input value.

Tips

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

Viwer Source

Code

```vue
<template>
  <FieldNumber :num="num" :precision="2" :step="0.1" :max="10" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(1)
</script>
```

:::

Controls Position

Set controls-position to decide the position of control buttons.

Viwer Source

Code

```vue
<template>
  <FieldNumber :num="num" :precision="2" :step="0.1" :max="10" :controlsPosition="'right'" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(1)
</script>
```

:::

Value Type

Value Type ID / INTEGER

Value Type NUMBER / QUANTITY

Value Type AMOUNT / COSTS_PLUS_PRICES

Viwer Source

Code

```vue
<template>
  <p> {{ 'Value Type' }} <el-tag effect="Light">  {{ 'ID / INTEGER ' }} </el-tag> </p>
  <FieldNumber
    :num="num"
    :controls="true"
  />
  <p> {{ 'Value Type' }} <el-tag effect="Light">  {{ 'NUMBER / QUANTITY ' }} </el-tag> </p>
  <FieldNumber
    :num="num2"
    :valueType="'QUANTITY'"
    :controls="true"
    :precision="2"
  />
  <p> {{ 'Value Type' }} <el-tag effect="Light">  {{ 'AMOUNT / COSTS_PLUS_PRICES ' }} </el-tag> </p>
  <FieldNumber
    :num="num3"
    :valueType="'COSTS_PLUS_PRICES'"
    :controls="true"
    :controlsPosition="'right'"
    :slotsCurrency="'$'"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(1)
</script>
```

:::

Props

Name	Description	Type	Mandatory
num	binding value	number	true
valueType	Type value ID / INTEGER / NUMBER / QUANTITY / AMOUNT / COSTS_PLUS_PRICES	string	False

Attributes

Name	Description	Type	Default
min	the minimum allowed value	number	-Infinity
max	the maximum allowed value	number	Infinity
step	incremental step	number	1
stepStrictly	whether input value can only be multiple of step	boolean	False
precision	precision of input value	number	0
controls	whether to enable the control buttons	boolean	False
controlsPosition	position of the control buttons	strign	right
disabled	whether Switch is disabled	boolean	true
size	size of Switch large / default / small	string	default
placeholder	placeholder the Select	string	Select
slotsCurrency	The format or symbol of the currency to display	string	$

Slots

Name	Description
header	Customize Default Content Top
footer	Customize Default Content Bottom

Example for Developer

Open in StackBlitz

Directory

  └─ src                                            # Main source code.
      └── Components                                # Global components
              └── Atoms                             # Atom components
                  └── FieldNumber                   # Field Number specific components.