数字输入 InputNumber

用于输入数字值，支持步进、范围限制、小数精度、单位显示等功能。

基础用法

通过 v-model 绑定数值，支持步进按钮和手动输入。

<template>
  <bp-space type="vertical">
    <bp-input-number
      size="default"
      :style="{ width: '180px' }"
      v-model="val"
      :precision="4"
      :step="0.001"
      :max="5"
      :min="-1"
      placeholder="Please enter"
    ></bp-input-number>
  </bp-space>
</template>

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

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

步进与范围

通过 step 设置步进值，min 和 max 限制范围。

基础用法

步进 5，范围 0-100

步进 0.1

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">基础用法</div>
      <bp-input-number v-model="val" style="width: 180px" placeholder="请输入" />
    </div>
    <div>
      <div class="label">步进 5，范围 0-100</div>
      <bp-input-number v-model="val2" :step="5" :min="0" :max="100" style="width: 180px" />
    </div>
    <div>
      <div class="label">步进 0.1</div>
      <bp-input-number v-model="val3" :step="0.1" :precision="2" style="width: 180px" />
    </div>
  </div>
</template>

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

const val = ref<number | "">("");
const val2 = ref(50);
const val3 = ref(1.5);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

小数精度

通过 precision 属性设置保留的小数位数。

整数（默认）

保留 2 位小数

保留 4 位小数

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">整数（默认）</div>
      <bp-input-number v-model="val1" style="width: 180px" />
    </div>
    <div>
      <div class="label">保留 2 位小数</div>
      <bp-input-number v-model="val2" :precision="2" style="width: 180px" />
    </div>
    <div>
      <div class="label">保留 4 位小数</div>
      <bp-input-number v-model="val3" :precision="4" :step="0.0001" style="width: 180px" />
    </div>
  </div>
</template>

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

const val1 = ref(10);
const val2 = ref(3.14);
const val3 = ref(2.7182);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

单位与隐藏按钮

通过 unit 属性添加单位，hide-button 隐藏步进按钮。

带单位

%

隐藏步进按钮

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">带单位</div>
      <bp-input-number v-model="val" unit="%" style="width: 180px" />
    </div>
    <div>
      <div class="label">隐藏步进按钮</div>
      <bp-input-number v-model="val2" hide-button style="width: 180px" placeholder="手动输入" />
    </div>
  </div>
</template>

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

const val = ref(75);
const val2 = ref<number | "">("");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

尺寸

通过 size 属性设置尺寸，支持 mini、small、default、large。

mini

small

default

large

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end">
    <div>
      <div class="label">mini</div>
      <bp-input-number v-model="val" size="mini" style="width: 120px" />
    </div>
    <div>
      <div class="label">small</div>
      <bp-input-number v-model="val" size="small" style="width: 140px" />
    </div>
    <div>
      <div class="label">default</div>
      <bp-input-number v-model="val" style="width: 180px" />
    </div>
    <div>
      <div class="label">large</div>
      <bp-input-number v-model="val" size="large" style="width: 200px" />
    </div>
  </div>
</template>

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

const val = ref(100);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

禁用与只读

通过 disabled 属性禁用，readonly 属性设为只读。

禁用

只读

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">禁用</div>
      <bp-input-number v-model="val" disabled style="width: 180px" />
    </div>
    <div>
      <div class="label">只读</div>
      <bp-input-number v-model="val" readonly style="width: 180px" />
    </div>
  </div>
</template>

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

const val = ref(42);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

InputNumber 属性

v-model	绑定值	NumberString	-	-
id	输入框 ID	String	-	-
name	输入框名称	String	-	-
placeholder	占位文本	String	-	-
size	输入框尺寸	InputSize	default	-
unit	单位	String	-	-
hide-button	是否隐藏步进按钮	Boolean	-	-
precision	小数精度	Number	-	-
step	步进值	Number	1	-
min	最小值	Number	Number.MIN_SAFE_INTEGER	-
max	最大值	Number	Number.MAX_SAFE_INTEGER	-
readonly	是否只读	Boolean	-	-
disabled	是否禁用	Boolean	-	-
nan-to-zero	NaN 是否转为 0	Boolean	-	-
model-event	触发更新事件	String	input	-

InputNumber 事件

input	输入触发	value: Number	-
blur	失焦触发	--	-
step	步进触发	value: Number	-

InputNumber 方法

focus	聚焦	-	-	-
blur	失焦	-	-	-
getStringValue	获取格式化字符串	-	-	-