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>
