InputNumber 数字输入框
用于输入数值,支持步进、范围限制、小数精度以及增减按钮位置控制。
基础输入
最基础的数字输入能力,支持 v-model 双向绑定。
<template>
<div class="component-card-demo-column">
<TsInputNumber v-model="valueA" :min="0" :max="100" :step="1" placeholder="请输入 0 ~ 100 的数字" />
<TsInputNumber v-model="valueB" :min="-50" :max="50" :step="5" placeholder="-50 ~ 50,步进 5" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TsInputNumber } from 'tui';
const valueA = ref(10);
const valueB = ref(0);
</script>
范围与步进(min / max / step)
限制输入区间,并通过 step 控制增减的步进值。
<template>
<div class="component-card-demo-column">
<TsInputNumber v-model="amount" :min="0" :max="20" :step="2" placeholder="0~20,步进 2" />
<TsInputNumber v-model="offset" :min="-10" :max="10" :step="1" placeholder="-10~10,步进 1" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TsInputNumber } from 'tui';
const amount = ref(6);
const offset = ref(-2);
</script>
小数精度(precision)
结合 step 与 precision,控制小数位和数值格式。
<template>
<div class="component-card-demo-column">
<TsInputNumber v-model="price" :step="0.01" :precision="2" :min="0" :max="9999" placeholder="价格(保留 2 位小数)" />
<TsInputNumber v-model="ratio" :step="0.001" :precision="3" :min="0" :max="1" placeholder="比例(0~1,保留 3 位小数)" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TsInputNumber } from 'tui';
const price = ref(19.99);
const ratio = ref(0.125);
</script>
增减按钮(controls / controlsPosition)
演示是否展示增减按钮,以及 controlsPosition 的配置。
<template>
<div class="component-card-demo-column">
<TsInputNumber v-model="withControls" :controls="true" controlsPosition="right" :step="1" placeholder="显示增减按钮(right)" />
<TsInputNumber v-model="withoutControls" :controls="false" :step="1" placeholder="隐藏增减按钮(仅输入)" />
<TsInputNumber v-model="disabledValue" :controls="true" controlsPosition="right" :disabled="true" placeholder="禁用状态" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TsInputNumber } from 'tui';
const withControls = ref(10);
const withoutControls = ref(20);
const disabledValue = ref(30);
</script>