feat(slider): 优化slider

TDesignOteam · Jul 4, 2024 · 892e90c · 892e90c
1 parent fd77e97
commit 892e90c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 10 deletions.
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
@@ -256,7 +256,9 @@ export default class Popup extends Component<PopupProps> {
                 onScroll={this.handleScroll}
               >
                 {props.content}
-                {props.showArrow ? <div class={`${componentName}__arrow`} /> : null}
+                {props.showArrow ? (
+                  <div class={`${componentName}__arrow`} style={{ ...this.getOverlayStyle(props.arrowStyle) }} />
+                ) : null}
               </div>
             )}
           </div>

diff --git a/src/popup/type.ts b/src/popup/type.ts
@@ -54,6 +54,10 @@ export interface TdPopupProps {
    * 浮层样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点
    */
   overlayStyle?: Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles);
+  /**
+   * 箭头样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点
+   */
+  arrowStyle?: Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles);
   /**
    * 浮层出现位置
    * @default top

diff --git a/src/slider/slider-button.tsx b/src/slider/slider-button.tsx
@@ -24,7 +24,23 @@ interface SliderButtonProps {
 
 @tag('t-slider-button')
 export default class SliderButton extends Component<SliderButtonProps> {
-  static isLightDOM = true;
+  static css = [
+    `.t-slider__button-wrapper--vertical {
+  top: auto;
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  background-color: transparent;
+  text-align: center;
+  user-select: none;
+  line-height: normal;
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}`,
+  ];
 
   static defaultProps = {
     label: true,
@@ -56,7 +72,7 @@ export default class SliderButton extends Component<SliderButtonProps> {
 
   hovering = false;
 
-  dragging = false;
+  dragging = signal(false);
 
   isClick = false;
 
@@ -114,7 +130,7 @@ export default class SliderButton extends Component<SliderButtonProps> {
   @bind
   handleMouseLeave() {
     this.hovering = false;
-    if (!this.dragging) {
+    if (!this.dragging.value) {
       this.hideTooltipComponent();
     }
   }
@@ -135,7 +151,7 @@ export default class SliderButton extends Component<SliderButtonProps> {
 
   @bind
   onDragStart(event) {
-    this.dragging = true;
+    this.dragging.value = true;
     this.isClick = true;
     const { type } = event;
     let { clientY, clientX } = event as MouseEvent;
@@ -156,7 +172,7 @@ export default class SliderButton extends Component<SliderButtonProps> {
   onDragEnd() {
     if (this.dragging) {
       setTimeout(() => {
-        this.dragging = false;
+        this.dragging.value = false;
         this.hideTooltipComponent();
       }, 0);
       window.removeEventListener('mousemove', this.onDragging);
@@ -180,7 +196,7 @@ export default class SliderButton extends Component<SliderButtonProps> {
 
   @bind
   onDragging(event) {
-    if (!this.dragging) {
+    if (!this.dragging.value) {
       return;
     }
 
@@ -229,7 +245,7 @@ export default class SliderButton extends Component<SliderButtonProps> {
     value = Number(parseFloat(`${value}`).toFixed(this.props.precision));
     this.props?.onInput?.(value);
 
-    if (!this.dragging && this.props.value !== this.prevValue) {
+    if (!this.dragging.value && this.props.value !== this.prevValue) {
       this.prevValue = this.props.value;
     }
   }
@@ -285,7 +301,10 @@ export default class SliderButton extends Component<SliderButtonProps> {
     return (
       <div
         ref={this.buttonRef}
-        className={`${this.className}-wrapper`}
+        className={classname(`${this.className}-wrapper`, {
+          [`${classPrefix}-is-disabled`]: props.disabled,
+          [`${this.className}-wrapper--vertical`]: props.vertical,
+        })}
         style={this.wrapperStyle}
         tabindex="0"
         onmouseenter={this.handleMouseEnter}
@@ -302,11 +321,12 @@ export default class SliderButton extends Component<SliderButtonProps> {
           hideEmptyPopup
           {...this.getTooltipProps()}
           overlayInnerStyle={{ whiteSpace: 'nowrap' }}
+          arrowStyle={{ marginLeft: '-8px' }}
           strategy="absolute"
           content={this.getTooltipContent()}
           visible={props.label && this.visible.value}
         >
-          <div className={classname(`${this.className}`, { [`${this.className}--dragging`]: this.draggable })} />
+          <div className={classname(`${this.className}`, { [`${this.className}--dragging`]: this.dragging.value })} />
         </t-tooltip>
       </div>
     );

diff --git a/src/slider/slider.tsx b/src/slider/slider.tsx
@@ -230,6 +230,14 @@ export default class Slider extends Component<SliderProps> {
     (this[button].current as SliderButtonType).setPosition(percent);
   }
 
+  get precision() {
+    const precisions = [this.props.min, this.props.max, this.props.step].map((item) => {
+      const decimalArr = `${item}`.split('.');
+      return decimalArr[1] ? decimalArr[1].length : 0;
+    });
+    return Math.max.apply(null, precisions);
+  }
+
   @bind
   emitChange(value: SliderValue) {
     let changeValue = value;
@@ -420,6 +428,7 @@ export default class Slider extends Component<SliderProps> {
               tooltipProps={props.tooltipProps}
               vertical={this.isVertical}
               rangeDiff={this.rangeDiff}
+              precision={this.precision}
               value={props.range ? this.firstValue.value : this.prevValue.value}
               sliderSize={this.sliderSize.value}
               resetSize={this.resetSize}
@@ -436,6 +445,7 @@ export default class Slider extends Component<SliderProps> {
                 tooltipProps={props.tooltipProps}
                 vertical={this.isVertical}
                 rangeDiff={this.rangeDiff}
+                precision={this.precision}
                 value={this.secondValue.value}
                 sliderSize={this.sliderSize.value}
                 resetSize={this.resetSize}