ant-design-vue/components/vc-input-number/demo/custom.jsx

44 lines
951 B
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import InputNumber from '../src/index';
import '../assets/index.less';
2018-04-04 04:04:49 +00:00
export default {
2019-01-12 03:33:27 +00:00
data() {
2018-04-04 04:04:49 +00:00
return {
disabled: false,
readOnly: false,
value: 5,
2019-01-12 03:33:27 +00:00
};
2018-04-04 04:04:49 +00:00
},
methods: {
2019-01-12 03:33:27 +00:00
onChange(value) {
console.log('onChange:', value);
this.value = value;
2018-04-04 04:04:49 +00:00
},
2019-01-12 03:33:27 +00:00
toggleDisabled() {
this.disabled = !this.disabled;
2018-04-04 04:04:49 +00:00
},
2019-01-12 03:33:27 +00:00
toggleReadOnly() {
this.readOnly = !this.readOnly;
2018-04-04 04:04:49 +00:00
},
},
2019-01-12 03:33:27 +00:00
render() {
const upHandler = <div style={{ color: 'blue' }}>x</div>;
const downHandler = <div style={{ color: 'red' }}>V</div>;
2018-04-04 04:04:49 +00:00
return (
2019-01-12 03:33:27 +00:00
<div style="margin: 10px;">
2018-04-04 04:04:49 +00:00
<InputNumber
min={-8}
max={10}
value={this.value}
onChange={this.onChange}
2019-01-12 03:33:27 +00:00
style="width: 100px"
2018-04-04 04:04:49 +00:00
readOnly={this.readOnly}
disabled={this.disabled}
upHandler={upHandler}
downHandler={downHandler}
/>
</div>
2019-01-12 03:33:27 +00:00
);
2018-04-04 04:04:49 +00:00
},
2019-01-12 03:33:27 +00:00
};