KERNEL-12794

bi.slider数值滑块控件,支持通过props设置初始值

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);
+BI.shortcut("demo.slider", Demo.Slider);

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);
+BI.shortcut("bi.interval_slider", BI.IntervalSlider);

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);
+BI.shortcut("bi.single_slider", BI.SingleSlider);

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);
+BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel);

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);
+BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);