import{c as t,o as d,A as e}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},r=e('

InputNumber 数字输入框组件

介绍

由加、减按钮以及输入框组成，用于输入一定范围的数字。

安装

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

代码演示

基础用法1

初始化一个默认值

<nut-inputnumber v-model:modelValue="1" />\n

基础用法2

设置步长step 和保留的小数位decimalPlaces

<nut-inputnumber v-model:modelValue="1" :step="1.1" :decimalPlaces="1" />\n

基础用法3

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

<nut-inputnumber v-model:modelValue="1" :min="3" :max="5" />\n

基础用法4

readonly设置只读

<nut-inputnumber v-model:modelValue="1" :readonly="true" />\n

基础用法5

size设置操作符的大小

<nut-inputnumber v-model:modelValue="1" :size="20px" />\n

高级用法

before-change支持异步修改数量

<nut-inputnumber v-model:modelValue="1" :before-change="true"/>\n

  const beforeChange = () => {\n    // return true;\n    return new Promise(resolve => {\n      setTimeout(() => {\n        resolve(true);\n      }, 500);\n    });\n  };\n

API

Props

参数	说明	类型	默认值
size	操作符+、-尺寸	String	`20px`
color	操作符+、-颜色	String	`#1a1a1a`
dis-color	操作符+、-禁用时颜色	String	`#ccc`
min	最小值	String、Number	`1`
max	最大值	String、Number	`Infinity`
step	步长	String、Number	`1`
readonly	只读	Boolean	false
modelValue	初始值	String、Number	`''`
decimal-places	设置保留的小数位	String、Number	`1`
before-change	支持异步	Function	-

Events

事件名	说明	回调参数
change	值改变时触发	num: string
focus	输入框获取焦点时触发	event: Event, num: string
blur	输入框失去焦点时触发	event: Event, num: string
add-no-allow	超出最大事件回调	-
reduce-no-allow	超出最小事件回调	-

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