From 0a753b689be6fd971089257a1ac950d8ca59f63e Mon Sep 17 00:00:00 2001 From: zsmj Date: Fri, 16 Sep 2022 14:26:14 +0800 Subject: [PATCH] KERNEL-12794 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit bi.slider数值滑块控件,支持通过props设置初始值 --- demo/js/widget/slider/demo.slider.js | 64 ++++++++----------- src/widget/intervalslider/intervalslider.js | 27 +++++--- src/widget/singleslider/singleslider.js | 17 ++++- src/widget/singleslider/singleslider.label.js | 30 ++++++--- .../singleslider/singleslider.normal.js | 21 ++++-- 5 files changed, 95 insertions(+), 64 deletions(-) diff --git a/demo/js/widget/slider/demo.slider.js b/demo/js/widget/slider/demo.slider.js index 61ebe57e7..2116ff99e 100644 --- a/demo/js/widget/slider/demo.slider.js +++ b/demo/js/widget/slider/demo.slider.js @@ -17,16 +17,11 @@ Demo.Slider = BI.inherit(BI.Widget, { digit: 0, width: o.width, height: o.height, - cls: "layout-bg-white" - }); - - singleSlider.setMinAndMax({ + cls: "layout-bg-white", + value: 30, min: 10, - max: o.max + max: 100 }); - - singleSlider.setValue(30); - singleSlider.populate(); singleSlider.on(BI.SingleSlider.EVENT_CHANGE, function () { console.log(this.getValue()); }); @@ -35,14 +30,14 @@ Demo.Slider = BI.inherit(BI.Widget, { type: "bi.single_slider_normal", width: o.width, height: 30, - cls: "layout-bg-white" - }); - normalSingleSlider.setMinAndMax({ + cls: "layout-bg-white", 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({ type: "bi.single_slider_label", @@ -50,47 +45,38 @@ Demo.Slider = BI.inherit(BI.Widget, { height: o.height, digit: 0, unit: "个", - cls: "layout-bg-white" - }); - singleSliderLabel.setMinAndMax({ + cls: "layout-bg-white", min: o.min, - max: o.max + max: o.max, + value: 10, }); - singleSliderLabel.setValue(10); - singleSliderLabel.populate(); var intervalSlider = BI.createWidget({ type: "bi.interval_slider", width: o.width, digit: 0, - cls: "layout-bg-white" - }); - intervalSlider.setMinAndMax({ + cls: "layout-bg-white", min: o.min, - max: o.max - }); - intervalSlider.setValue({ - min: 10, - max: 120 + max: o.max, + value: { + min: 10, + max: 70 + } }); - intervalSlider.populate(); var intervalSliderLabel = BI.createWidget({ type: "bi.interval_slider", width: o.width, unit: "px", cls: "layout-bg-white", - digit: 1 - }); - intervalSliderLabel.setMinAndMax({ + digit: 1, min: 0, - max: 120 - }); - intervalSliderLabel.setValue({ - min: 10, - max: 120 + max: 120, + value: { + min: 60, + max: 120 + } }); - intervalSliderLabel.populate(); return { @@ -126,4 +112,4 @@ Demo.Slider = BI.inherit(BI.Widget, { }; } }); -BI.shortcut("demo.slider", Demo.Slider); \ No newline at end of file +BI.shortcut("demo.slider", Demo.Slider); diff --git a/src/widget/intervalslider/intervalslider.js b/src/widget/intervalslider/intervalslider.js index 68f098f37..130165680 100644 --- a/src/widget/intervalslider/intervalslider.js +++ b/src/widget/intervalslider/intervalslider.js @@ -15,7 +15,23 @@ BI.IntervalSlider = BI.inherit(BI.Single, { props: { baseCls: "bi-interval-slider bi-slider-track", 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 () { @@ -25,13 +41,8 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this.enable = false; this.valueOne = ""; this.valueTwo = ""; - this.calculation = new BI.AccurateCalculationModel(); - // this.backgroundTrack = BI.createWidget({ - // type: "bi.layout", - // cls: "background-track", - // height: c.TRACK_HEIGHT - // }); + this.calculation = new BI.AccurateCalculationModel(); this.grayTrack = BI.createWidget({ type: "bi.layout", cls: "gray-track", @@ -539,4 +550,4 @@ BI.IntervalSlider = BI.inherit(BI.Single, { } }); BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.interval_slider", BI.IntervalSlider); \ No newline at end of file +BI.shortcut("bi.interval_slider", BI.IntervalSlider); diff --git a/src/widget/singleslider/singleslider.js b/src/widget/singleslider/singleslider.js index ea51dbace..a330115b9 100644 --- a/src/widget/singleslider/singleslider.js +++ b/src/widget/singleslider/singleslider.js @@ -16,7 +16,20 @@ BI.SingleSlider = BI.inherit(BI.Single, { props: { baseCls: "bi-single-slider bi-slider-track", 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 () { @@ -340,4 +353,4 @@ BI.SingleSlider = BI.inherit(BI.Single, { } }); BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_slider", BI.SingleSlider); \ No newline at end of file +BI.shortcut("bi.single_slider", BI.SingleSlider); diff --git a/src/widget/singleslider/singleslider.label.js b/src/widget/singleslider/singleslider.label.js index fce46f013..d6b8aa639 100644 --- a/src/widget/singleslider/singleslider.label.js +++ b/src/widget/singleslider/singleslider.label.js @@ -13,16 +13,27 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { TRACK_GAP_HALF: 7, TRACK_GAP: 14 }, - _defaultConfig: function () { - return BI.extend(BI.SingleSliderLabel.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-single-slider-label bi-slider-track", - digit: false, - unit: "" + + props: { + baseCls: "bi-single-slider-label bi-slider-track", + digit: false, + 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 c = this._constant; this.enable = false; @@ -83,9 +94,8 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { }); this._setVisible(false); - BI.createWidget({ + return ({ type: "bi.absolute", - element: this, items: [{ el: { type: "bi.vertical", @@ -308,4 +318,4 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { } }); BI.SingleSliderLabel.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel); \ No newline at end of file +BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel); diff --git a/src/widget/singleslider/singleslider.normal.js b/src/widget/singleslider/singleslider.normal.js index 2ba74c8b9..095a5fadf 100644 --- a/src/widget/singleslider/singleslider.normal.js +++ b/src/widget/singleslider/singleslider.normal.js @@ -16,16 +16,27 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, { props: { baseCls: "bi-single-slider-normal bi-slider-track", - minMax: { - min: 0, - max: 100 - } + min: 0, + max: 100, + value: "", // color: "#3f8ce8" }, + beforeMount: function () { + const { value, min, max } = this.options; + this.setMinAndMax({ + min, + max, + }); + this.setValue(value); + this.populate(); + }, + render: function () { var self = this; + var o = this.options; var c = this._constant; + var track = this._createTrack(); this.slider = BI.createWidget({ type: "bi.single_slider_button" @@ -282,4 +293,4 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, { } }); BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG"; -BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal); \ No newline at end of file +BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);