63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
import InputNumber from '../src/index';
|
|
import '../assets/index.less';
|
|
|
|
function getSum(str) {
|
|
let total = 0;
|
|
str.split('').forEach(c => {
|
|
const num = Number(c);
|
|
|
|
if (!isNaN(num)) {
|
|
total += num;
|
|
}
|
|
});
|
|
|
|
return total;
|
|
}
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: 1000,
|
|
};
|
|
},
|
|
render() {
|
|
return (
|
|
<div style="margin: 10px;">
|
|
<InputNumber
|
|
defaultValue={1000}
|
|
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
|
|
/>
|
|
<InputNumber
|
|
defaultValue={100}
|
|
formatter={value => `${value}%`}
|
|
parser={value => value.replace('%', '')}
|
|
/>
|
|
<InputNumber
|
|
style="width: 100px"
|
|
formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
|
|
/>
|
|
|
|
<div>
|
|
<h1>In Control</h1>
|
|
<InputNumber
|
|
value={this.value}
|
|
onChange={value => {
|
|
this.value = value;
|
|
}}
|
|
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>Strange Format</h1>
|
|
<InputNumber
|
|
defaultValue={1000}
|
|
formatter={value => `$ ${value} - ${getSum(value)}`}
|
|
parser={value => (value.match(/^\$ ([\d\.]*) .*$/) || [])[1]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|