import{c as t,o as d,A as e}from"./vendor.91b30fe3.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

高级用法

async支持异步修改数量，设置了此属性为true，必须同时在change事件中手动设置input值才能生效

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

API

Props

参数说明类型默认值
size操作符+、-尺寸String20px
color操作符+、-颜色String#1a1a1a
dis-color操作符+、-禁用时颜色String#ccc
min最小值String、Number1
max最大值String、NumberInfinity
step步长String、Number1
readonly只读Booleanfalse
modelValue初始值String、Number‘’
decimal-places设置保留的小数位String、Number1
async支持异步Booleanfalse

Events

事件名说明回调参数
change值改变时触发num: string
focus输入框获取焦点时触发event: Event, num: string
blur输入框失去焦点时触发event: Event, num: string
add-no-allow超出最大事件回调-
reduce-no-allow超出最小事件回调-
',29),u={expose:[],setup:e=>(e,u)=>(d(),t("div",o,[r]))};export default u;