---
title: InputNumber 数字输入框
description: 弹出层组件是其他弹窗类组件如气泡确认框实现的基础，当这些组件提供的能力不能满足定制需求时，可以在弹出层组件基础上封装。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: { code: "swimly", doc: "swimly" }
---

## 基本用法

数字输入框主要用来扩展输入框的数字类型，通过`value`，`defaultValue`，`v-model`来设置他的值，**value：** 该方式赋值会导致
组件不可操作，**defaultValue：** 通过该方式赋值为默认值，并不会印象操作和绑值，**v-model：** 通过该方式赋值为响应式。

{{ base }}

## 数字对齐方式

通过`align`可设置数字输入框文字水平对齐方式。

{{ align }}

## 前后容器

通过`label`可设置左侧的文本信息，通过`suffix`可设置右侧的内容。

{{ prefixSuffix }}

## 自动宽度

类似输入框的自动宽度，通过`autowidth`来设置。

{{ autowidth }}

## 更改输入框样式

通过`inputProps`可以自定义中间输入框的格式，支持所有`input`的属性配置，具体请参考[`LInput`](/web/components/input)

{{ inputProps }}

## 不同尺寸

通过`size`可设置不同尺寸的数字输入框，可选：`small`，`medium`，`large`，默认为：`medium`。

{{ size }}

## 不同状态

通过`status`可设置数字输入框的不同状态，可选：`default`，`success`，`warning`，`error`，默认为：`default`。

{{ status }}

## 不同主题

这里的主题和其他类似按钮的组件不同，通过`theme`设置切换按钮的布局方式，可选：`column`，`row`，`normal`

{{ theme }}

## 范围限制

通过`min`可限制数字输入框可输入的最小值，通过`max`可限制数字输入框可输入的最大值。

{{ limit }}

## 步长

步长就是每次操作数据变化的幅度，默认为`1`，可通过`step`来进行更改，可以时小数，并且还可通过`decimalPlaces`来更改小数点位
数。

{{ step }}

## 禁用，只读

通过`disabled`设置禁用，通过`readonly`设置只读。

{{ disabled }}
