JSY-30724 feat:区间滑块支持自定义编辑框的宽度

packages/fineui/src/widget/intervalslider/intervalslider.js

@@ -42,6 +42,8 @@ export class IntervalSlider extends Single {
         min: 0,
         max: 100,
         value: { min: "", max: "" },
+        lAlign: "center",
+        rAlign: "center",
     };
 
     static EVENT_CHANGE = "EVENT_CHANGE";
@@ -61,6 +63,7 @@ export class IntervalSlider extends Single {
         this.enable = false;
         this.valueOne = "";
         this.valueTwo = "";
+        const { unit, lAlign, rAlign, editorWidth } = this.options;
 
         this.calculation = new AccurateCalculationModel();
         this.grayTrack = createWidget({
@@ -78,9 +81,10 @@ export class IntervalSlider extends Single {
         this.labelOne = createWidget({
             type: SignTextEditor.xtype,
             cls: "slider-editor-button",
-            text: this.options.unit,
+            text: unit,
             allowBlank: false,
-            width: toPix(c.EDITOR_WIDTH, 2),
+            textAlign: lAlign,
+            width: BI.isNull(editorWidth) ? BI.toPix(c.EDITOR_WIDTH, 2) : BI.toPix(editorWidth, 2),
             height: toPix(c.EDITOR_HEIGHT, 2),
             validationChecker: v => this._checkValidation(v),
         });
@@ -107,9 +111,10 @@ export class IntervalSlider extends Single {
         this.labelTwo = createWidget({
             type: SignTextEditor.xtype,
             cls: "slider-editor-button",
-            text: this.options.unit,
+            text: unit,
             allowBlank: false,
-            width: toPix(c.EDITOR_WIDTH, 2),
+            textAlign: rAlign,
+            width: BI.isNull(editorWidth) ? BI.toPix(c.EDITOR_WIDTH, 2) : BI.toPix(editorWidth, 2),
             height: toPix(c.EDITOR_HEIGHT, 2),
             validationChecker: v => this._checkValidation(v),
         });
@@ -258,21 +263,15 @@ export class IntervalSlider extends Single {
                                 el: this.labelOne,
                                 top: 0,
                                 left: 0,
-                            }
-                        ],
                             },
-                    {
-                        type: AbsoluteLayout.xtype,
-                        items: [
                             {
                                 el: this.labelTwo,
                                 top: 0,
                                 right: 0,
-                            }
+                            },
                         ],
-                    }
+                    },
                 ],
-                rgap: c.EDITOR_R_GAP,
                 height: c.SLIDER_HEIGHT,
             },
             top: 0,
@@ -403,8 +402,17 @@ export class IntervalSlider extends Single {
     }
 
     _resetLabelPosition(needReverse) {
-        this.labelOne.element.css({ left: needReverse ? "100%" : "0%" });
+        const { lAlign, rAlign } = this.options;
-        this.labelTwo.element.css({ left: needReverse ? "0%" : "100%" });
+        this.labelOne.element.css({
+            left: needReverse ? "unset" : "0%",
+            right: needReverse ? "0%" : "unset",
+        });
+        this.labelOne.element.children()[0] && (this.labelOne.element.children()[0].style.textAlign = needReverse ? rAlign : lAlign);
+        this.labelTwo.element.css({
+        left: needReverse ? "0%" : "unset",
+        right: needReverse ? "unset" : "0%",
+        });
+        this.labelTwo.element.children()[0] && (this.labelTwo.element.children()[0].style.textAlign = needReverse ? lAlign : rAlign);
     }
 
     _setSliderOnePosition(percent) {