数字输入框 InputNumber
需要获取数值时，可以通过鼠标或键盘，输入范围内的数值。
基本使用
Show Code
vue
<template>
<n-input-number v-model:value="value" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
console.log('value:', value.value)
})
</script>步长为小数
Show Code
vue
<template>
<n-input-number :step="0.1" v-model:value="value" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
console.log('value:', value.value)
})
</script>设置数值精度
Show Code
vue
<template>
<n-input-number :step="0.3" :precision="2" v-model:value="value" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
console.log('value:', value.value)
})
</script>格式化数值
Show Code
vue
<template>
<n-input-number :width="120" :step="10" :formatter="formatter" v-model:value="formatValue" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { moneyFormat } from 'vite-nice-ui'
const formatValue = ref(1000)
watchEffect(() => {
console.log('formatValue:', formatValue.value)
})
function formatter(num: string): string {
return moneyFormat(num, 2)
}
</script>自定义min max
Show Code
vue
<template>
<n-input-number :min="0" :max="10" v-model:value="value" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
console.log('value:', value.value)
})
</script>添加前缀图标
$
Show Code
vue
<template>
<n-input-number prefix="$" v-model:value="value" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
console.log('value:', value.value)
})
</script>API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 输入框宽度，单位px | number | 90 |
| min | 最小值 | number | -Infinity |
| max | 最大值 | number | Infinity |
| step | 每次改变步数，可以为小数 | number | 1 |
| precision | 数值精度 | number | 0 |
| prefix | 前缀图标 | string | slot | '' |
| formatter | 指定展示值的格式 | Funtion | (value: string) => value |
| keyboard | 是否启用键盘快捷键行为（上方向键增，下方向键减） | boolean | true |
| value(v-model) | 当前值 | number | null | null |
Events
| 事件名称 | 说明 | 参数 |
|---|---|---|
| change | 变化回调 | (value: number) => void |