import{c as t,o as e,B as d}from"./vendor.36ea9f7d.js";const o={class:"markdown-body"},n=d('

InputNumber 数字输入框

介绍

通过点击按钮控制数字增减。

安装

import { createApp } from 'vue';\nimport { InputNumber,Icon } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(InputNumber).use(Icon);\n\n

代码演示

基础用法

初始化一个默认值

<nut-inputnumber v-model="value" />\n

import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(1);\n    return { value };\n  },\n};\n

步长设置

设置步长 step 5

<nut-inputnumber v-model="value" step="5" />\n

限制输入范围

min 和 max 属性分别表示最小值和最大值

<nut-inputnumber v-model="value" min="10" max="20" />\n

禁用状态

disabled 禁用状态下无法点击按钮或修改输入框。

<nut-inputnumber v-model="value" disabled />\n

只读禁用输入框

readonly 设置只读禁用输入框输入行为

<nut-inputnumber v-model="value" readonly />\n

支持小数点

设置步长 step 0.1 decimal-places 小数保留1位

<nut-inputnumber v-model="value" step="0.1" decimal-places="1" />\n

支持异步修改

通过 change 事件和 model-value 进行异步修改

<nut-inputnumber :model-value="value" @change="onChange" />\n

import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(1);\n    const onChange = (value: number) => {\n      setTimeout(() => {\n        value.value = value;\n      }, 2000);\n    };\n    return { value,onChange };\n  },\n};\n

自定义按钮大小

设置步长 step 0.1 decimal-places 小数保留1位

<nut-inputnumber v-model="value"  button-size="30" input-width="50" />\n

API

Props

参数	说明	类型	默认值
v-model	初始值	String、Number	-
input-width	输入框宽度	String	`40px`
button-size	操作符+、-尺寸	String	`20px`
min	最小值限制	String、Number	`1`
max	最大值限制	String、Number	`9999`
step	步长	String、Number	`1`
decimal-places	设置保留的小数位	String、Number	`0`
disabled	禁用所有功能	Boolean	false
readonly	只读状态禁用输入框操作行为	Boolean	false

Events

事件名	说明	回调参数
add	点击增加按钮时触发	event: Event
reduce	点击减少按钮时触发	event: Event
overlimit	点击不可用的按钮时触发	event: Event
change	值改变时触发	value: number , event : Event
blur	输入框失去焦点时触发	event: Event
focus	输入框获得焦点时触发	event: Event

',37),u={expose:[],setup:d=>(d,u)=>(e(),t("div",o,[n]))};export default u;