数字输入框

通过鼠标或键盘,输入范围内的数值。

何时使用

当需要获取标准数值时。

代码演示

InputNumber数字输入框 - 图1

基本

数字输入框。

  1. <template>
  2. <div>
  3. <a-input-number id="inputNumber" v-model="value" :min="1" :max="10" @change="onChange" />
  4. 当前值:{{ value }}
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. value: 3,
  12. };
  13. },
  14. methods: {
  15. onChange(value) {
  16. console.log('changed', value);
  17. },
  18. },
  19. };
  20. </script>

InputNumber数字输入框 - 图2

不可用

点击按钮切换可用状态。

  1. <template>
  2. <div>
  3. <a-input-number :min="1" :max="10" :disabled="disabled" :default-value="3" />
  4. <div style="marginTop:20px">
  5. <a-button type="primary" @click="toggle">
  6. Toggle disabled
  7. </a-button>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. disabled: true,
  16. };
  17. },
  18. methods: {
  19. toggle() {
  20. this.disabled = !this.disabled;
  21. },
  22. },
  23. };
  24. </script>

InputNumber数字输入框 - 图3

格式化展示

通过 formatter 格式化数字,以展示具有具体含义的数据,往往需要配合 parser 一起使用。

  1. <template>
  2. <div>
  3. <a-input-number
  4. :default-value="1000"
  5. :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
  6. :parser="value => value.replace(/\$\s?|(,*)/g, '')"
  7. @change="onChange"
  8. />
  9. <a-input-number
  10. :default-value="100"
  11. :min="0"
  12. :max="100"
  13. :formatter="value => `${value}%`"
  14. :parser="value => value.replace('%', '')"
  15. @change="onChange"
  16. />
  17. </div>
  18. </template>
  19. <script>
  20. export default {
  21. methods: {
  22. onChange(value) {
  23. console.log('changed', value);
  24. },
  25. },
  26. };
  27. </script>

InputNumber数字输入框 - 图4

三种大小

三种大小的数字输入框,当 size 分别为 largesmall 时,输入框高度为 40px24px ,默认高度为 32px

  1. <template>
  2. <div>
  3. <a-input-number size="large" :min="1" :max="100000" :default-value="3" @change="onChange" />
  4. <a-input-number :min="1" :max="100000" :default-value="3" @change="onChange" />
  5. <a-input-number size="small" :min="1" :max="100000" :default-value="3" @change="onChange" />
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. methods: {
  11. onChange(value) {
  12. console.log('changed', value);
  13. },
  14. },
  15. };
  16. </script>
  17. <style scoped>
  18. .ant-input-number {
  19. margin-right: 10px;
  20. }
  21. </style>

InputNumber数字输入框 - 图5

小数

和原生的数字输入框一样,value 的精度由 step 的小数位数决定。

  1. <template>
  2. <a-input-number :min="0" :max="10" :step="0.1" @change="onChange" />
  3. </template>
  4. <script>
  5. export default {
  6. methods: {
  7. onChange(value) {
  8. console.log('changed', value);
  9. },
  10. },
  11. };
  12. </script>

API

属性如下

成员说明类型默认值
autoFocus自动获取焦点booleanfalse
defaultValue初始值number
disabled禁用booleanfalse
formatter指定输入框展示值的格式function(value: number | string): string-
max最大值numberInfinity
min最小值number-Infinity
parser指定从 formatter 里转换回数字的方式,和 formatter 搭配使用function( string): number-
precision数值精度number-
decimalSeparator小数点string-
size输入框大小string
step每次改变步数,可以为小数number|string1
value(v-model)当前值number

事件

事件名称说明回调参数版本
change变化回调Function(value: number | string)
pressEnter按下回车的回调function(e)

方法

名称描述
blur()移除焦点
focus()获取焦点