You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/components/vc-input-number/demo/combination-key-format.jsx

60 lines
1.3 KiB

import InputNumber from '../src/index';
import '../assets/index.less';
export default {
data() {
return {
disabled: false,
readOnly: false,
value: 50000,
};
},
methods: {
onChange(value) {
console.log('onChange:', value);
this.value = value;
},
toggleDisabled() {
this.disabled = !this.disabled;
},
toggleReadOnly() {
this.readOnly = !this.readOnly;
},
numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
},
format(num) {
return `$ ${this.numberWithCommas(num)} boeing737`;
},
parser(num) {
return num
.toString()
.split(' ')[1]
.replace(/,*/g, '');
},
},
render() {
return (
<div style="margin: 10px;">
<InputNumber
min={-8000}
max={10000000}
value={this.value}
onChange={this.onChange}
style="width: 200px"
readOnly={this.readOnly}
disabled={this.disabled}
autoFocus={false}
step={100}
formatter={this.format}
parser={this.parser}
/>
<p style="padding:10px 0">
<button onClick={this.toggleDisabled}>toggle Disabled</button>
<button onClick={this.toggleReadOnly}>toggle readOnly</button>
</p>
</div>
);
},
};