vue-antd-ui
Version:
An enterprise-class UI design language and Vue-based implementation
333 lines (314 loc) • 7.08 kB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
import Slider from '../index';
import '../assets/index.less';
var Range = Slider.Range;
function log(value) {
console.log(value); //eslint-disable-line
}
var CustomizedRange = {
data: function data() {
return {
lowerBound: 20,
upperBound: 40,
value: [20, 40]
};
},
methods: {
onLowerBoundChange: function onLowerBoundChange(e) {
this.lowerBound = +e.target.value;
},
onUpperBoundChange: function onUpperBoundChange(e) {
this.upperBound = +e.target.value;
},
onSliderChange: function onSliderChange(value) {
log(value);
this.value = value;
},
handleApply: function handleApply() {
this.value = [this.lowerBound, this.upperBound];
}
},
render: function render() {
var h = arguments[0];
return h('div', [h('label', ['LowerBound: ']), h('input', {
attrs: { type: 'number' },
domProps: {
'value': this.lowerBound
},
on: {
'change': this.onLowerBoundChange
}
}), h('br'), h('label', ['UpperBound: ']), h('input', {
attrs: { type: 'number' },
domProps: {
'value': this.upperBound
},
on: {
'change': this.onUpperBoundChange
}
}), h('br'), h(
'button',
{
on: {
'click': this.handleApply
}
},
['Apply']
), h('br'), h('br'), h(Range, {
attrs: { allowCross: false, value: this.value },
on: {
'change': this.onSliderChange
}
})]);
}
};
var DynamicBounds = {
data: function data() {
return {
min: 0,
max: 100
};
},
methods: {
onSliderChange: function onSliderChange(value) {
log(value);
},
onMinChange: function onMinChange(e) {
this.min = +e.target.value || 0;
},
onMaxChange: function onMaxChange(e) {
this.max = +e.target.value || 100;
}
},
render: function render() {
var h = arguments[0];
return h('div', [h('label', ['Min: ']), h('input', {
attrs: { type: 'number' },
domProps: {
'value': this.min
},
on: {
'input': this.onMinChange
}
}), h('br'), h('label', ['Max: ']), h('input', {
attrs: { type: 'number' },
domProps: {
'value': this.max
},
on: {
'input': this.onMaxChange
}
}), h('br'), h('br'), h(Range, {
attrs: { defaultValue: [20, 50], min: this.min, max: this.max
},
on: {
'change': this.onSliderChange
}
})]);
}
};
var ControlledRange = {
data: function data() {
return {
value: [20, 40, 60, 80]
};
},
methods: {
handleChange: function handleChange(value) {
this.value = value;
}
},
render: function render() {
var h = arguments[0];
return h(Range, {
attrs: { value: this.value },
on: {
'change': this.handleChange
}
});
}
};
var ControlledRangeDisableAcross = {
props: {
pushable: [Number, Boolean]
},
data: function data() {
return {
value: [20, 40, 60, 80]
};
},
methods: {
handleChange: function handleChange(value) {
this.value = value;
}
},
render: function render() {
var h = arguments[0];
var rangeRange = {
props: _extends({
value: this.value,
allowCross: false
}, this.$props),
on: {
change: this.handleChange
}
};
return h(Range, rangeRange);
}
};
var PureRenderRange = {
data: function data() {
return {
foo: false
};
},
methods: {
handleChange: function handleChange(value) {
console.log(value);
this.foo = !this.foo;
}
},
render: function render() {
var h = arguments[0];
return h(Range, {
attrs: { defaultValue: [20, 40, 60, 80], allowCross: false },
on: {
'change': this.handleChange
}
});
}
};
export default {
render: function render() {
var h = arguments[0];
var style = { width: '400px', margin: '50px' };
var pStyle = { margin: '20px 0' };
return h('div', [h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Basic Range\uFF0C`allowCross=false`']
), h(Range, {
attrs: { allowCross: false, defaultValue: [0, 20] },
on: {
'change': log
}
})]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Basic Range\uFF0C`step=20` ']
), h(Range, {
attrs: { step: 20, defaultValue: [20, 20] },
on: {
'beforeChange': log
}
})]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Basic Range\uFF0C`step=20, dots` ']
), h(Range, {
attrs: { dots: true, step: 20, defaultValue: [20, 40] },
on: {
'afterChange': log
}
})]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Basic Range\uFF0Cdisabled']
), h(Range, {
attrs: { allowCross: false, defaultValue: [0, 20], disabled: true },
on: {
'change': log
}
})]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Controlled Range']
), h(ControlledRange)]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Controlled Range, not allow across']
), h(ControlledRangeDisableAcross)]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Controlled Range, not allow across, pushable=5']
), h(ControlledRangeDisableAcross, {
attrs: { pushable: 5 }
})]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Multi Range']
), h(Range, {
attrs: { count: 3, defaultValue: [20, 40, 60, 80], pushable: true }
})]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Multi Range with custom track and handle style']
), h(Range, {
attrs: { count: 3, defaultValue: [20, 40, 60, 80], pushable: true,
trackStyle: [{ backgroundColor: 'red' }, { backgroundColor: 'green' }],
handleStyle: [{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }],
railStyle: { backgroundColor: 'black' }
}
})]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Customized Range']
), h(CustomizedRange)]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Range with dynamic `max` `min`']
), h(DynamicBounds)]
), h(
'div',
{ style: style },
[h(
'p',
{ style: pStyle },
['Range as child component']
), h(PureRenderRange)]
)]);
}
};