NumberInput

Examples

Size variants

Available ui prop values: xs / s / m.

<template>
<article>
  <section>
    <veui-number-input v-model="value"/>
  </section>
  <section>
    <veui-number-input
      v-model="value"
      ui="s"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      ui="xs"
    />
  </section>
</article>
</template>

<script>
import { NumberInput } from 'veui'

export default {
  components: {
    'veui-number-input': NumberInput
  },
  data () {
    return {
      value: 0
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

Read-only

Set the readonly prop to make the number input box readonly.

只读

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="readonly">
      只读
    </veui-checkbox>
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :readonly="readonly"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :readonly="readonly"
      ui="s"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :readonly="readonly"
      ui="xs"
    />
  </section>
</article>
</template>

<script>
import { NumberInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-number-input': NumberInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      readonly: true,
      value: 0
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Disabled

Set the disabled prop to disable the number input box.

禁用

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      禁用
    </veui-checkbox>
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :disabled="disabled"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :disabled="disabled"
      ui="s"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :disabled="disabled"
      ui="xs"
    />
  </section>
</article>
</template>

<script>
import { NumberInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-number-input': NumberInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      disabled: true,
      value: 0
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

Precision and stepping

Set the decimal-place prop to specify the number of decimal places.

Set the step prop to specify the value of each increment/decrement.

精确2位小数,递增0.01

精确2位小数,递增0.1

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>精确2位小数,递增0.01</h4>
    <veui-number-input
      :decimal-place="2"
      :step="0.01"
    />
  </section>
  <section>
    <h4>精确2位小数,递增0.1</h4>
    <veui-number-input
      :decimal-place="2"
      :step="0.1"
    />
  </section>
</article>
</template>

<script>
import { NumberInput } from 'veui'

export default {
  components: {
    'veui-number-input': NumberInput
  }
}
</script>

API

Props

Name Type Default Description

ui

string

Predefined styles.

Value	Description
`xs`	Extra small style.
`s`	Small style.
`m`	Medium style.

value

number

v-model

The value of the number input box.

readonly boolean false Whether the number input box is in readonly state.

disabled boolean false Whether the number input box is disabled.

placeholder string - Input placeholder.

autofocus boolean false Whether to autofocus the number input.

select-on-focus boolean false Whether to automatically select the text in the number input box when focused.

max number - The maximum allowed value.

min number - The minimum allowed value.

decimal-place number 0 The number of decimal places, default is integer, -1 means no precision processing.

step number 1 The value of each increment/decrement.

format (val: number, defaultFormattedValue: string) => string - Custom number formatting.

parse (val: string) => number - Custom parsing function to parse the input value into a number.

Slots

Name	Description
`before`	The content before the number input box.
`after`	The content after the number input box, which comes after the increase and decrease buttons.

Events

Name Description

change

Native change event. Callback parameters: (value, event).

Name	Type	Description
`value`	`number`	The value of the number input box.
`event`	`Event`	The native event object.

input

v-model

Triggered when valid input is entered and affected by number formatting. If the current value is formatted as an invalid value, it will not be triggered. Callback parameter: (value: string), where value is the value of the number input box.

In addition, NumberInput supports the following native events:

auxclick, click, contextmenu, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup, select, wheel, keydown, keypress, keyup, focus, blur, focusin, focusout.

The callback function is passed the native event object.

Icons

Name	Description
`increase`	The increase button.
`decrease`	The decrease button.

Edit this page on GitHubEdit