InputNumber 数字输入框

数字类型的输入和格式化。

相关文档

数字格式化基于 numeral.js。 更多模板请参考：

• numeral.js

基本用法

显示一个美元格式的数字。

控制台

 value:9999

<template>
	<gov-input-number v-model="value" />
</template>

<script setup>
import { ref } from "vue";
const value = ref(9999);
</script>

控制按钮

• 用 controls 设置是否显示控制按钮。
• 用 step 设置步进。

控制台

 value:

<template>
	<gov-input-number v-model="value" controls :step="100" />
</template>

<script setup>
import { ref } from "vue";
const value = ref();
</script>

禁用状态

• disabled 禁用。

<template>
	<gov-input-number v-model="value" controls :step="100" disabled/>
</template>

<script setup>
import { ref } from "vue";
const value = ref();
</script>

最大/最小值

• 用 min/max 设置最大最小值。

控制台

 value:600 // 最大值1000；最小值500 

<template>
	<gov-input-number
		v-model="value"
		controls
		format="$ 0,0.00"
		:step="100"
		:min="500"
		:max="1000"
	/>
</template>

<script setup>
import { ref } from "vue";
const value = ref();
</script>

返回格式

• 用 format 控制显示格式。
• 用 valueFormat 控制返回值格式。

控制台

 value:$ 314,159 // 双向绑定都是格式化后的值 

<template>
	<demo-container class="gov-demo-inputnumber">
		<gov-input-number v-model="value"  format="$ 0,0" valueFormat />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("$ 314,159"); // 双向绑定都是格式化后的值
</script>

控制 Input

该组件基于Input 组件，可以和 Input 控件一样设置前缀、后缀、前置内容、后置内容，具体可参考 Input 组件。

<template>
	<gov-input-number
		v-model="value"
		format="0,0.00"
		prefix="￥"
		suffix="RMB"
	>
		<template #addonBefore>💰</template>
		<template #addonAfter>🔥</template>
	</gov-input-number>
</template>

<script setup>
import { ref } from "vue";
const value = ref(9999);
</script>

Attributes

基于 Input 组件，更多内容不再赘述。

属性名	说明	类型	可选值	默认值
modelValue	绑定的值	Number	—	undefined
min	最小值	Number	—	Number.MIN_SAFE_INTEGER
max	最大值	Number	—	Number.MAX_SAFE_INTEGER
step	步长	Number	—	1
format	数值格式化字符串	String	—	"0,0"
valueFormat	双向绑定值是否为格式化后的	Boolean	true, false	false
controls	是否显示加减按钮	Boolean	true, false	false
prefix	前缀内容	String/Number	—	undefined
size	输入框尺寸	String	—	—
disabled	是否禁用	Boolean	true, false	false
triggerForm	是否触发表单验证	Boolean	true, false	true

Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	新的值
focus	输入框获得焦点时触发	—
blur	输入框失去焦点时触发	—
change	值改变时触发	新的值
input	输入时触发	输入的值
clear	清空按钮点击时触发	—
add	点击增加按钮时触发	新的值
subtract	点击减少按钮时触发	新的值

Slots

插槽名	说明	作用域插槽	内容
addonBefore	前置标签内容	否	可以放置自定义的内容，如文本或图标。
addonAfter	后置标签内容	否	可以放置自定义的内容，如文本或图标。
prefix	输入框前缀内容	否	可以放置自定义的内容，如文本或图标。
suffix	输入框后缀内容	否	可以放置自定义的内容，如文本或图标。