数字输入 InputNumber ​

提供针对数字输入的输入框

基础用法 ​

一个基础输入框用法，通过 v-model 绑定数据值。

<template>
  <bp-space>
    <bp-input-number :style="{ width: '180px' }" v-model="val" placeholder="Please enter"></bp-input-number>
    <bp-input-number :style="{ width: '180px' }" disabled v-model="val" placeholder="Please enter"></bp-input-number>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref<number>(16);
</script>

控制精度和步长 ​

在某些具体场景，你可能需要通过 precision 和 step 控制展示精度和操作增减的步长

<template>
  <bp-space type="vertical">
    <bp-input-number :style="{ width: '180px' }" :precision="2" v-model="val" placeholder="Please enter"></bp-input-number>
    <bp-input-number :style="{ width: '180px' }" :step="0.01" v-model="val1" placeholder="Please enter"></bp-input-number>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref<number>(16);
const val1 = ref<number>();
</script>

InputNumber 属性 ​

v-model
输入框绑定值
Number
-
size
按钮尺寸
Enum
normal
disabled
是否禁用
Boolean
false
readonly
是否只读状态
Boolean
false
is-danger
是否警示状态
Boolean
false
placeholder
占位提示文字
String
-
hide-button
是否隐藏按钮
Boolean
false
precision
数字精度
Number
-
step
数字变化步长
Number
-
min
最小值
Number
-
max
最大值
Number
-

InputNumber 事件 ​

input
输入内容触发
value:number
blur
失焦触发
none