import{e as a,o as t,G as n}from"./vendor.js";const e={class:"markdown-body"},l=n(`

InputNumber \u6570\u5B57\u8F93\u5165\u6846

\u4ECB\u7ECD

\u901A\u8FC7\u70B9\u51FB\u6309\u94AE\u63A7\u5236\u6570\u5B57\u589E\u51CF\u3002

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { InputNumber,Icon } from '@nutui/nutui';
// taro
import { InputNumber,Icon } from '@nutui/nutui-taro';

const app = createApp();
app.use(InputNumber).use(Icon);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u521D\u59CB\u5316\u4E00\u4E2A\u9ED8\u8BA4\u503C

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

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(1);
    return { value };
  },
};

\u6B65\u957F\u8BBE\u7F6E

\u8BBE\u7F6E\u6B65\u957F step 5

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

\u9650\u5236\u8F93\u5165\u8303\u56F4

min \u548C max \u5C5E\u6027\u5206\u522B\u8868\u793A\u6700\u5C0F\u503C\u548C\u6700\u5927\u503C

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

\u7981\u7528\u72B6\u6001

disabled \u7981\u7528\u72B6\u6001\u4E0B\u65E0\u6CD5\u70B9\u51FB\u6309\u94AE\u6216\u4FEE\u6539\u8F93\u5165\u6846\u3002

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

\u53EA\u8BFB\u7981\u7528\u8F93\u5165\u6846

readonly \u8BBE\u7F6E\u53EA\u8BFB\u7981\u7528\u8F93\u5165\u6846\u8F93\u5165\u884C\u4E3A

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

\u652F\u6301\u5C0F\u6570\u70B9

\u8BBE\u7F6E\u6B65\u957F step 0.1 decimal-places \u5C0F\u6570\u4FDD\u75591\u4F4D

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

\u652F\u6301\u5F02\u6B65\u4FEE\u6539

\u901A\u8FC7 change \u4E8B\u4EF6\u548C model-value \u8FDB\u884C\u5F02\u6B65\u4FEE\u6539

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

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(1);
    const onChange = (value: number) => {
      setTimeout(() => {
        value.value = value;
      }, 2000);
    };
    return { value,onChange };
  },
};

\u81EA\u5B9A\u4E49\u6309\u94AE\u5927\u5C0F

\u8BBE\u7F6E\u6B65\u957F step 0.1 decimal-places \u5C0F\u6570\u4FDD\u75591\u4F4D

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

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u521D\u59CB\u503C	String\u3001Number	-
input-width	\u8F93\u5165\u6846\u5BBD\u5EA6	String	`40px`
button-size	\u64CD\u4F5C\u7B26+\u3001-\u5C3A\u5BF8	String	`20px`
min	\u6700\u5C0F\u503C\u9650\u5236	String\u3001Number	`1`
max	\u6700\u5927\u503C\u9650\u5236	String\u3001Number	`9999`
step	\u6B65\u957F	String\u3001Number	`1`
decimal-places	\u8BBE\u7F6E\u4FDD\u7559\u7684\u5C0F\u6570\u4F4D	String\u3001Number	`0`
disabled	\u7981\u7528\u6240\u6709\u529F\u80FD	Boolean	false
readonly	\u53EA\u8BFB\u72B6\u6001\u7981\u7528\u8F93\u5165\u6846\u64CD\u4F5C\u884C\u4E3A	Boolean	false

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
add	\u70B9\u51FB\u589E\u52A0\u6309\u94AE\u65F6\u89E6\u53D1	event: Event
reduce	\u70B9\u51FB\u51CF\u5C11\u6309\u94AE\u65F6\u89E6\u53D1	event: Event
overlimit	\u70B9\u51FB\u4E0D\u53EF\u7528\u7684\u6309\u94AE\u65F6\u89E6\u53D1	event: Event,type:string (reduce or add)
change	\u503C\u6539\u53D8\u65F6\u89E6\u53D1	value: number , event : Event
blur	\u8F93\u5165\u6846\u5931\u53BB\u7126\u70B9\u65F6\u89E6\u53D1	event: Event
focus	\u8F93\u5165\u6846\u83B7\u5F97\u7126\u70B9\u65F6\u89E6\u53D1	event: Event

`,37),p=[l],u={setup(d,{expose:s}){return s({frontmatter:{}}),(r,o)=>(t(),a("div",e,p))}};export{u as default};