Input Number

Input numerical values with a customizable range.

Basic usage

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

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

<script setup>
  import { ref } from 'vue'

  const num = ref(1)
  const handleChange = (value) => {
    console.log(value)
  }
</script>

<template>
  <m-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
</template>

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.

<template>
  <m-input-number v-model="num" :disabled="true" />
</template>

Steps

Allows you to define incremental steps.

Add step attribute to set the step.

<template>
  <m-input-number v-model="num" :step="2" />
</template>

Precision

Add precision attribute to set the precision of input value.

<template>
  <m-input-number v-model="num" :precision="2" :step="0.1" :max="10" />
</template>

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

Size

Use attribute size to set additional sizes with large or small.

<template>
<m-input-number v-model="num" size="large" />
<m-input-number v-model="num" size="small" />
<m-input-number v-model="num" size="mini" />
</template>

Controls Position

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

<template>
<m-input-number v-model="num" controls-position="right" />
</template>

Custom Icon

Use decreaseIcon and increaseIcon to set custom icons.

<template>
<m-input-number v-model="num" controls-position="right" >
  <template #decreaseIcon >
    <m-icon name="close"></m-icon>
  </template>
</m-input-number>
</template>

API

Property	Description	Type	Default
v-model	Binding value	string	-
value	Binding value	string	-
placeholder	Placeholder text	string	-
disabled	Disabled state of input box	boolean	false
readonly	Readonly state of input box	boolean	false
size	Size of input box, optional values: mini、small、large	string	small
prefix	Prefix slot	string	-
suffix	Suffix slot	string	-
min	Minimum allowed value	number	-
max	Maximum allowed value	number	-

Events

Event Name	Description	Parameters
change	Triggered when the value changes	(value: string)
focus	Triggered when the input box gets focus	(event: Event)
blur	Triggered when the input box loses focus	(event: Event)

Slots

Name	Description
prefix	Prefix slot
suffix	Suffix slot
decreaseIcon	Custom icon for decreasing button
increaseIcon	Custom icon for increasing button