InputNumber 数字输入框

介绍

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

安装

import { createApp } from 'vue';
import { InputNumber,Icon } from '@nutui/nutui';
const app = createApp();
app.use(InputNumber).use(Icon);

代码演示

基础用法

初始化一个默认值

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

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

步长设置

设置步长 step 5

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

限制输入范围

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

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

禁用状态

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

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

只读禁用输入框

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

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

支持小数点

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

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

支持异步修改

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

<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 };
  },
};

自定义按钮大小

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

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

API

Props

Events