Browse Source

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

Merge in VISUAL/fineui from ~CLAIRE.TANG/fineui:master to master

* commit 'c8daadffe3b5bd594c3e7d047fdb151bac449fbc':
  JSY-30724 feat:区间滑块支持自定义编辑框的宽度
  JSY-30724 feat:区间滑块支持自定义编辑框的宽度
research/test
Claire.Tang-唐锦霞 1 year ago
parent
commit
48f25bb60c
  1. 38
      packages/fineui/src/widget/intervalslider/intervalslider.js

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

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

Loading…
Cancel
Save