Browse Source

Pull request #3076: KERNEL-12794 feat: bi.slider数值滑块控件,支持通过props设置初始值

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit 'd9d5b887f54471deff52423bb9a5b34d56e8dff2':
  KERNEL-12794
es6
Dailer-刘荣歆 2 years ago
parent
commit
4830418e21
  1. 58
      demo/js/widget/slider/demo.slider.js
  2. 25
      src/widget/intervalslider/intervalslider.js
  3. 15
      src/widget/singleslider/singleslider.js
  4. 24
      src/widget/singleslider/singleslider.label.js
  5. 17
      src/widget/singleslider/singleslider.normal.js

58
demo/js/widget/slider/demo.slider.js

@ -17,16 +17,11 @@ Demo.Slider = BI.inherit(BI.Widget, {
digit: 0, digit: 0,
width: o.width, width: o.width,
height: o.height, height: o.height,
cls: "layout-bg-white" cls: "layout-bg-white",
}); value: 30,
singleSlider.setMinAndMax({
min: 10, min: 10,
max: o.max max: 100
}); });
singleSlider.setValue(30);
singleSlider.populate();
singleSlider.on(BI.SingleSlider.EVENT_CHANGE, function () { singleSlider.on(BI.SingleSlider.EVENT_CHANGE, function () {
console.log(this.getValue()); console.log(this.getValue());
}); });
@ -35,14 +30,14 @@ Demo.Slider = BI.inherit(BI.Widget, {
type: "bi.single_slider_normal", type: "bi.single_slider_normal",
width: o.width, width: o.width,
height: 30, height: 30,
cls: "layout-bg-white" cls: "layout-bg-white",
});
normalSingleSlider.setMinAndMax({
min: o.min, min: o.min,
max: o.max max: o.max,
value: 30,
});
normalSingleSlider.on(BI.SingleSliderNormal.EVENT_DRAG, function () {
console.log(this.getValue());
}); });
normalSingleSlider.setValue(10);
normalSingleSlider.populate();
var singleSliderLabel = BI.createWidget({ var singleSliderLabel = BI.createWidget({
type: "bi.single_slider_label", type: "bi.single_slider_label",
@ -50,47 +45,38 @@ Demo.Slider = BI.inherit(BI.Widget, {
height: o.height, height: o.height,
digit: 0, digit: 0,
unit: "个", unit: "个",
cls: "layout-bg-white" cls: "layout-bg-white",
});
singleSliderLabel.setMinAndMax({
min: o.min, min: o.min,
max: o.max max: o.max,
value: 10,
}); });
singleSliderLabel.setValue(10);
singleSliderLabel.populate();
var intervalSlider = BI.createWidget({ var intervalSlider = BI.createWidget({
type: "bi.interval_slider", type: "bi.interval_slider",
width: o.width, width: o.width,
digit: 0, digit: 0,
cls: "layout-bg-white" cls: "layout-bg-white",
});
intervalSlider.setMinAndMax({
min: o.min, min: o.min,
max: o.max max: o.max,
}); value: {
intervalSlider.setValue({
min: 10, min: 10,
max: 120 max: 70
}
}); });
intervalSlider.populate();
var intervalSliderLabel = BI.createWidget({ var intervalSliderLabel = BI.createWidget({
type: "bi.interval_slider", type: "bi.interval_slider",
width: o.width, width: o.width,
unit: "px", unit: "px",
cls: "layout-bg-white", cls: "layout-bg-white",
digit: 1 digit: 1,
});
intervalSliderLabel.setMinAndMax({
min: 0, min: 0,
max: 120,
value: {
min: 60,
max: 120 max: 120
}
}); });
intervalSliderLabel.setValue({
min: 10,
max: 120
});
intervalSliderLabel.populate();
return { return {

25
src/widget/intervalslider/intervalslider.js

@ -15,7 +15,23 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
props: { props: {
baseCls: "bi-interval-slider bi-slider-track", baseCls: "bi-interval-slider bi-slider-track",
digit: false, digit: false,
unit: "" unit: "",
min: 0,
max: 100,
value: {
min: "",
max: "",
}
},
beforeMount: function () {
const { value, min, max } = this.options;
this.setMinAndMax({
min,
max,
});
this.setValue(value);
this.populate();
}, },
render: function () { render: function () {
@ -25,13 +41,8 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
this.enable = false; this.enable = false;
this.valueOne = ""; this.valueOne = "";
this.valueTwo = ""; this.valueTwo = "";
this.calculation = new BI.AccurateCalculationModel();
// this.backgroundTrack = BI.createWidget({ this.calculation = new BI.AccurateCalculationModel();
// type: "bi.layout",
// cls: "background-track",
// height: c.TRACK_HEIGHT
// });
this.grayTrack = BI.createWidget({ this.grayTrack = BI.createWidget({
type: "bi.layout", type: "bi.layout",
cls: "gray-track", cls: "gray-track",

15
src/widget/singleslider/singleslider.js

@ -16,7 +16,20 @@ BI.SingleSlider = BI.inherit(BI.Single, {
props: { props: {
baseCls: "bi-single-slider bi-slider-track", baseCls: "bi-single-slider bi-slider-track",
digit: false, digit: false,
unit: "" unit: "",
value: "",
min: 0,
max: 100,
},
beforeMount: function () {
const { value, min, max } = this.options;
this.setMinAndMax({
min,
max,
});
this.setValue(value);
this.populate();
}, },
render: function () { render: function () {

24
src/widget/singleslider/singleslider.label.js

@ -13,16 +13,27 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
TRACK_GAP_HALF: 7, TRACK_GAP_HALF: 7,
TRACK_GAP: 14 TRACK_GAP: 14
}, },
_defaultConfig: function () {
return BI.extend(BI.SingleSliderLabel.superclass._defaultConfig.apply(this, arguments), { props: {
baseCls: "bi-single-slider-label bi-slider-track", baseCls: "bi-single-slider-label bi-slider-track",
digit: false, digit: false,
unit: "" unit: "",
value: "",
min: 0,
max: 100,
},
beforeMount: function () {
const { value, min, max } = this.options;
this.setMinAndMax({
min,
max,
}); });
this.setValue(value);
this.populate();
}, },
_init: function () {
BI.SingleSliderLabel.superclass._init.apply(this, arguments);
render: function () {
var self = this, o = this.options; var self = this, o = this.options;
var c = this._constant; var c = this._constant;
this.enable = false; this.enable = false;
@ -83,9 +94,8 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
}); });
this._setVisible(false); this._setVisible(false);
BI.createWidget({ return ({
type: "bi.absolute", type: "bi.absolute",
element: this,
items: [{ items: [{
el: { el: {
type: "bi.vertical", type: "bi.vertical",

17
src/widget/singleslider/singleslider.normal.js

@ -16,16 +16,27 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
props: { props: {
baseCls: "bi-single-slider-normal bi-slider-track", baseCls: "bi-single-slider-normal bi-slider-track",
minMax: {
min: 0, min: 0,
max: 100 max: 100,
} value: "",
// color: "#3f8ce8" // color: "#3f8ce8"
}, },
beforeMount: function () {
const { value, min, max } = this.options;
this.setMinAndMax({
min,
max,
});
this.setValue(value);
this.populate();
},
render: function () { render: function () {
var self = this; var self = this;
var o = this.options;
var c = this._constant; var c = this._constant;
var track = this._createTrack(); var track = this._createTrack();
this.slider = BI.createWidget({ this.slider = BI.createWidget({
type: "bi.single_slider_button" type: "bi.single_slider_button"

Loading…
Cancel
Save