Ant Design Vue教程

Ant Design Vue InputNumber数字输入框

Ant Design 针对数字输入框推出了专用的组件InputNumber支持步骤调整、数字精度、格式化等普通输入框没有的功能。

InputNumber用法

属性min表示允许输入的最小值 max最大值,step表示步数

<template>
  <div>
    <a-input-number id="inputNumber" step="2" :min="1" :max="10" v-model="value" 
     @change="onChange" />
    当前值:{{ value }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 3,
    };
  },
  methods: {
    //输入值变化后的事件
    onChange(value) {
      console.log('changed', value);
    },
  },
};
</script>

例子

格式化展示

代码演示每个3位用逗号隔开,并对格式化后的字符串转换为数字

<template>
  <div>
    <a-input-number
      :defaultValue="1000"
      :formatter="formatter"
      :parser="parser"
      @change="onChange"
      style="width:200px"
      step="2"
    /> 
  </div>
</template>
<script>
export default {
  methods: {
    //用逗号分隔数字
    formatter(value){
       return `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    //把格式化后的字符串转换为数字
    parser(value) {
      return  value.replace(/\$\s?|(,*)/g, '');
    },
    //获取变化后的数字
    onChange(value) {
      console.log('changed', value);
    },
  },
};
</script>

例子

浏览器引入js完整例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ant Design Vue InputNumber格式化例子</title> 
    <script src="//www.itxst.com/package/vue/vue.min.js"></script>
    <script src="//www.itxst.com/package/ant-design-vue/antd.js"></script>
    <link href="//www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
    <style>
        body {
            padding: 10px
        }
    </style>
</head>
<body>
    <div id="app">
       <a-input-number
      :defaultValue="1000"
      :formatter="formatter"
      :parser="parser"
      @change="onChange"
      style="width:200px"
    ></a-input-number>   
    </div>
    <script>
        const { LocaleProvider, locales } = window.antd;
        var app = new Vue({
            el: '#app',
   data() {
    return {
      value: 3,
    };
  },
 methods: {
    //用逗号分隔数字
    formatter(value){
       return `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    //把格式化后的字符串转换为数字
    parser(value) {
      return  value.replace(/\$\s?|(,*)/g, '');
    },
    //获取变化后的数字
    onChange(value) {
      console.log('changed', value);
    },
  }
        });
    </script>
</body>
</html>
Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 InputNumber 数字输入框 InputNumber 属性和事件 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Switch 开关