feat(Slider): add reverse prop (#9308)

* feat(Slider): add reverse prop * chore: types * chore: upd
2025-04-05 19:41:42 +08:00 · 2021-08-22 20:52:50 +08:00 · 2021-08-22 20:52:50 +08:00 · 2a8e2edf40
commit 2a8e2edf40
parent d0914f34ad
9 changed files with 217 additions and 58 deletions
--- a/src/config-provider/test/snapshots/demo.spec.ts.snap
+++ b/src/config-provider/test/snapshots/demo.spec.ts.snap
@ -85,7 +85,7 @@ exports[`should render demo and match snapshot 1`] = `
                   style="width: 50%; left: 0%;"
              >
                <div role="slider"
-                     class="van-slider__button-wrapper"
+                     class="van-slider__button-wrapper van-slider__button-wrapper--right"
                     tabindex="0"
                     aria-valuemin="0"
                     aria-valuenow="50"
@ -201,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
                     style="width: 50%; left: 0%;"
                >
                  <div role="slider"
-                       class="van-slider__button-wrapper"
+                       class="van-slider__button-wrapper van-slider__button-wrapper--right"
                       tabindex="0"
                       aria-valuemin="0"
                       aria-valuenow="50"
--- a/src/form/test/snapshots/demo.spec.ts.snap
+++ b/src/form/test/snapshots/demo.spec.ts.snap
@ -375,7 +375,7 @@ exports[`should render demo and match snapshot 1`] = `
                     style="width: 50%; left: 0%;"
                >
                  <div role="slider"
-                       class="van-slider__button-wrapper"
+                       class="van-slider__button-wrapper van-slider__button-wrapper--right"
                       tabindex="0"
                       aria-valuemin="0"
                       aria-valuenow="50"
--- a/src/slider/README.md
+++ b/src/slider/README.md
@ -159,6 +159,7 @@ export default {
 | active-color | Active color of bar | _string_ | `#1989fa` |
 | inactive-color | Inactive color of bar | _string_ | `#e5e5e5` |
 | range | Whether to enable dual thumb mode | _boolean_ | `false` |
+| reverse `v3.2.1` | Whether to reverse slider | `false` |
 | disabled | Whether to disable slider | _boolean_ | `false` |
 | readonly `v3.0.5` | Whether to be readonly | _boolean_ | `false` |
 | vertical | Whether to display slider vertically | _boolean_ | `false` |
--- a/src/slider/README.zh-CN.md
+++ b/src/slider/README.zh-CN.md
@ -161,6 +161,7 @@ export default {
 | active-color | 进度条激活态颜色 | _string_ | `#1989fa` |
 | inactive-color | 进度条非激活态颜色 | _string_ | `#e5e5e5` |
 | range | 是否开启双滑块模式 | _boolean_ | `false` |
+| reverse `v3.2.1` | 是否将进度条反转 | `false` |
 | disabled | 是否禁用滑块 | _boolean_ | `false` |
 | readonly `v3.0.5` | 是否为只读状态，只读状态下无法修改滑块的值 | _boolean_ | `false` |
 | vertical | 是否垂直展示 | _boolean_ | `false` |
--- a/src/slider/Slider.tsx
+++ b/src/slider/Slider.tsx
@ -17,13 +17,16 @@ import { useTouch } from '../composables/use-touch';

 const [name, bem] = createNamespace('slider');

-type SliderValue = number | [number, number];
+type NumberRange = [number, number];
+
+type SliderValue = number | NumberRange;

 export default defineComponent({
  name,

  props: {
    range: Boolean,
+    reverse: Boolean,
    disabled: Boolean,
    readonly: Boolean,
    vertical: Boolean,
@ -70,7 +73,7 @@ export default defineComponent({
      };
    });

-    const isRange = (val: unknown): val is [number, number] =>
+    const isRange = (val: unknown): val is NumberRange =>
      props.range && Array.isArray(val);

    // 计算选中条的长度百分比
@ -91,15 +94,27 @@ export default defineComponent({
      return '0%';
    };

-    const barStyle = computed<CSSProperties>(() => {
+    const barStyle = computed(() => {
      const mainAxis = props.vertical ? 'height' : 'width';
-      return {
+      const style: CSSProperties = {
        [mainAxis]: calcMainAxis(),
-        left: props.vertical ? undefined : calcOffset(),
-        top: props.vertical ? calcOffset() : undefined,
        background: props.activeColor,
-        transition: dragStatus.value ? 'none' : undefined,
      };
+
+      if (dragStatus.value) {
+        style.transition = 'none';
+      }
+
+      const getPositionKey = () => {
+        if (props.vertical) {
+          return props.reverse ? 'bottom' : 'top';
+        }
+        return props.reverse ? 'right' : 'left';
+      };
+
+      style[getPositionKey()] = calcOffset();
+
+      return style;
    });

    const format = (value: number) => {
@ -116,7 +131,7 @@ export default defineComponent({
      JSON.stringify(newValue) === JSON.stringify(oldValue);

    // 处理两个滑块重叠之后的情况
-    const handleOverlap = (value: [number, number]) => {
+    const handleOverlap = (value: NumberRange) => {
      if (value[0] > value[1]) {
        return value.slice(0).reverse();
      }
@ -125,7 +140,7 @@ export default defineComponent({

    const updateValue = (value: SliderValue, end?: boolean) => {
      if (isRange(value)) {
-        value = handleOverlap(value).map(format) as [number, number];
+        value = handleOverlap(value).map(format) as NumberRange;
      } else {
        value = format(value);
      }
@ -146,13 +161,24 @@ export default defineComponent({
        return;
      }

-      const { min, vertical, modelValue } = props;
+      const { min, reverse, vertical, modelValue } = props;
      const rect = useRect(root);
-      const delta = vertical
-        ? event.clientY - rect.top
-        : event.clientX - rect.left;
+
+      const getDelta = () => {
+        if (vertical) {
+          if (reverse) {
+            return rect.bottom - event.clientY;
+          }
+          return event.clientY - rect.top;
+        }
+        if (reverse) {
+          return rect.right - event.clientX;
+        }
+        return event.clientX - rect.left;
+      };
+
      const total = vertical ? rect.height : rect.width;
-      const value = Number(min) + (delta / total) * scope.value;
+      const value = Number(min) + (getDelta() / total) * scope.value;

      if (isRange(modelValue)) {
        const [left, right] = modelValue;
@ -177,7 +203,7 @@ export default defineComponent({
      currentValue = props.modelValue;

      if (isRange(currentValue)) {
-        startValue = currentValue.map(format) as [number, number];
+        startValue = currentValue.map(format) as NumberRange;
      } else {
        startValue = format(currentValue);
      }
@ -201,11 +227,15 @@ export default defineComponent({
      const rect = useRect(root);
      const delta = props.vertical ? touch.deltaY.value : touch.deltaX.value;
      const total = props.vertical ? rect.height : rect.width;
-      const diff = (delta / total) * scope.value;
+
+      let diff = (delta / total) * scope.value;
+      if (props.reverse) {
+        diff = -diff;
+      }

      if (isRange(startValue)) {
-        (currentValue as [number, number])[buttonIndex] =
-          startValue[buttonIndex] + diff;
+        const index = props.reverse ? 1 - buttonIndex : buttonIndex;
+        (currentValue as NumberRange)[index] = startValue[index] + diff;
      } else {
        currentValue = startValue + diff;
      }
@ -228,9 +258,9 @@ export default defineComponent({
    const getButtonClassName = (index?: 0 | 1) => {
      if (typeof index === 'number') {
        const position = ['left', 'right'];
-        return bem(`button-wrapper-${position[index]}`);
+        return bem(`button-wrapper`, position[index]);
      }
-      return bem('button-wrapper');
+      return bem('button-wrapper', props.reverse ? 'left' : 'right');
    };

    const renderButtonContent = (value: number, index?: 0 | 1) => {
@ -253,7 +283,7 @@ export default defineComponent({
    const renderButton = (index?: 0 | 1) => {
      const currentValue =
        typeof index === 'number'
-          ? (props.modelValue as [number, number])[index]
+          ? (props.modelValue as NumberRange)[index]
          : (props.modelValue as number);

      return (
--- a/src/slider/index.less
+++ b/src/slider/index.less
@ -31,7 +31,7 @@
  }

  &__bar {
-    position: relative;
+    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--van-slider-active-background-color);
@ -46,21 +46,20 @@
    border-radius: var(--van-slider-button-border-radius);
    box-shadow: var(--van-slider-button-box-shadow);

-    &-wrapper,
-    &-wrapper-right {
+    &-wrapper {
      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translate3d(50%, -50%, 0);
      cursor: grab;
-    }
+      top: 50%;

-    &-wrapper-left {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      transform: translate3d(-50%, -50%, 0);
-      cursor: grab;
+      &--right {
+        right: 0;
+        transform: translate3d(50%, -50%, 0);
+      }
+
+      &--left {
+        left: 0;
+        transform: translate3d(-50%, -50%, 0);
+      }
    }
  }

@ -68,9 +67,7 @@
    cursor: not-allowed;
    opacity: var(--van-slider-disabled-opacity);

-    .van-slider__button-wrapper,
-    .van-slider__button-wrapper-left,
-    .van-slider__button-wrapper-right {
+    .van-slider__button-wrapper {
      cursor: not-allowed;
    }
  }
@ -80,15 +77,14 @@
    width: var(--van-slider-bar-height);
    height: 100%;

-    .van-slider__button-wrapper,
-    .van-slider__button-wrapper-right {
+    .van-slider__button-wrapper--right {
      top: auto;
      right: 50%;
      bottom: 0;
      transform: translate3d(50%, 50%, 0);
    }

-    .van-slider__button-wrapper-left {
+    .van-slider__button-wrapper--left {
      top: 0;
      right: 50%;
      left: auto;
--- a/src/slider/test/snapshots/demo.spec.ts.snap
+++ b/src/slider/test/snapshots/demo.spec.ts.snap
@ -7,7 +7,7 @@ exports[`should render demo and match snapshot 1`] = `
         style="width: 50%; left: 0%;"
    >
      <div role="slider"
-           class="van-slider__button-wrapper"
+           class="van-slider__button-wrapper van-slider__button-wrapper--right"
           tabindex="0"
           aria-valuemin="0"
           aria-valuenow="50"
@ -26,7 +26,7 @@ exports[`should render demo and match snapshot 1`] = `
         style="width: 40%; left: 20%;"
    >
      <div role="slider"
-           class="van-slider__button-wrapper-left"
+           class="van-slider__button-wrapper van-slider__button-wrapper--left"
           tabindex="0"
           aria-valuemin="0"
           aria-valuenow="20"
@ -37,7 +37,7 @@ exports[`should render demo and match snapshot 1`] = `
        </div>
      </div>
      <div role="slider"
-           class="van-slider__button-wrapper-right"
+           class="van-slider__button-wrapper van-slider__button-wrapper--right"
           tabindex="0"
           aria-valuemin="0"
           aria-valuenow="60"
@ -56,7 +56,7 @@ exports[`should render demo and match snapshot 1`] = `
         style="width: 50%; left: 0%;"
    >
      <div role="slider"
-           class="van-slider__button-wrapper"
+           class="van-slider__button-wrapper van-slider__button-wrapper--right"
           tabindex="0"
           aria-valuemin="-50"
           aria-valuenow="0"
@ -75,7 +75,7 @@ exports[`should render demo and match snapshot 1`] = `
         style="width: 50%; left: 0%;"
    >
      <div role="slider"
-           class="van-slider__button-wrapper"
+           class="van-slider__button-wrapper van-slider__button-wrapper--right"
           tabindex="-1"
           aria-valuemin="0"
           aria-valuenow="50"
@ -94,7 +94,7 @@ exports[`should render demo and match snapshot 1`] = `
         style="width: 50%; left: 0%;"
    >
      <div role="slider"
-           class="van-slider__button-wrapper"
+           class="van-slider__button-wrapper van-slider__button-wrapper--right"
           tabindex="0"
           aria-valuemin="0"
           aria-valuenow="50"
@ -112,10 +112,10 @@ exports[`should render demo and match snapshot 1`] = `
       class="van-slider"
  >
    <div class="van-slider__bar"
-         style="width: 50%; left: 0%; background: rgb(238, 10, 36);"
+         style="width: 50%; background: rgb(238, 10, 36); left: 0%;"
    >
      <div role="slider"
-           class="van-slider__button-wrapper"
+           class="van-slider__button-wrapper van-slider__button-wrapper--right"
           tabindex="0"
           aria-valuemin="0"
           aria-valuenow="50"
@ -131,10 +131,10 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-slider">
    <div class="van-slider__bar"
-         style="width: 50%; left: 0%; background: rgb(238, 10, 36);"
+         style="width: 50%; background: rgb(238, 10, 36); left: 0%;"
    >
      <div role="slider"
-           class="van-slider__button-wrapper"
+           class="van-slider__button-wrapper van-slider__button-wrapper--right"
           tabindex="0"
           aria-valuemin="0"
           aria-valuenow="50"
@ -155,7 +155,7 @@ exports[`should render demo and match snapshot 1`] = `
           style="height: 50%; top: 0%;"
      >
        <div role="slider"
-             class="van-slider__button-wrapper"
+             class="van-slider__button-wrapper van-slider__button-wrapper--right"
             tabindex="0"
             aria-valuemin="0"
             aria-valuenow="50"
@ -174,7 +174,7 @@ exports[`should render demo and match snapshot 1`] = `
           style="height: 40%; top: 20%;"
      >
        <div role="slider"
-             class="van-slider__button-wrapper-left"
+             class="van-slider__button-wrapper van-slider__button-wrapper--left"
             tabindex="0"
             aria-valuemin="0"
             aria-valuenow="20"
@ -185,7 +185,7 @@ exports[`should render demo and match snapshot 1`] = `
          </div>
        </div>
        <div role="slider"
-             class="van-slider__button-wrapper-right"
+             class="van-slider__button-wrapper van-slider__button-wrapper--right"
             tabindex="0"
             aria-valuemin="0"
             aria-valuenow="60"
--- a/src/slider/test/snapshots/index.spec.ts.snap
+++ b/src/slider/test/snapshots/index.spec.ts.snap
@ -6,7 +6,7 @@ exports[`should render left-button、right-button slot correctly 1`] = `
       style="width: 50%; left: 30%;"
  >
    <div role="slider"
-         class="van-slider__button-wrapper-left"
+         class="van-slider__button-wrapper van-slider__button-wrapper--left"
         tabindex="0"
         aria-valuemin="0"
         aria-valuenow="30"
@ -16,7 +16,7 @@ exports[`should render left-button、right-button slot correctly 1`] = `
      left-30
    </div>
    <div role="slider"
-         class="van-slider__button-wrapper-right"
+         class="van-slider__button-wrapper van-slider__button-wrapper--right"
         tabindex="0"
         aria-valuemin="0"
         aria-valuenow="80"
@ -28,3 +28,74 @@ exports[`should render left-button、right-button slot correctly 1`] = `
  </div>
 </div>
 `;
+
+exports[`should render reversed range slider correctly 1`] = `
+<div class="van-slider">
+  <div class="van-slider__bar"
+       style="width: 15%; right: 25%;"
+  >
+    <div role="slider"
+         class="van-slider__button-wrapper van-slider__button-wrapper--left"
+         tabindex="0"
+         aria-valuemin="0"
+         aria-valuenow="25"
+         aria-valuemax="100"
+         aria-orientation="horizontal"
+    >
+      <div class="van-slider__button">
+      </div>
+    </div>
+    <div role="slider"
+         class="van-slider__button-wrapper van-slider__button-wrapper--right"
+         tabindex="0"
+         aria-valuemin="0"
+         aria-valuenow="40"
+         aria-valuemax="100"
+         aria-orientation="horizontal"
+    >
+      <div class="van-slider__button">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render reversed slider correctly 1`] = `
+<div class="van-slider">
+  <div class="van-slider__bar"
+       style="width: 25%; right: 0%;"
+  >
+    <div role="slider"
+         class="van-slider__button-wrapper van-slider__button-wrapper--left"
+         tabindex="0"
+         aria-valuemin="0"
+         aria-valuenow="25"
+         aria-valuemax="100"
+         aria-orientation="horizontal"
+    >
+      <div class="van-slider__button">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render reversed vertical slider correctly 1`] = `
+<div class="van-slider van-slider--vertical">
+  <div class="van-slider__bar"
+       style="height: 25%; bottom: 0%;"
+  >
+    <div role="slider"
+         class="van-slider__button-wrapper van-slider__button-wrapper--left"
+         tabindex="0"
+         aria-valuemin="0"
+         aria-valuenow="25"
+         aria-valuemax="100"
+         aria-orientation="vertical"
+    >
+      <div class="van-slider__button">
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/src/slider/test/index.spec.ts
+++ b/src/slider/test/index.spec.ts
@ -219,3 +219,63 @@ test('should render left-button、right-button slot correctly', async () => {
  await later();
  expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render reversed slider correctly', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      reverse: true,
+      modelValue: 25,
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render reversed vertical slider correctly', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      reverse: true,
+      vertical: true,
+      modelValue: 25,
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render reversed range slider correctly', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      range: true,
+      reverse: true,
+      modelValue: [25, 40],
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should update modelValue correctly after clicking the reversed slider', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      reverse: true,
+      modelValue: 50,
+    },
+  });
+
+  trigger(wrapper, 'click', 100, 0);
+  expect(wrapper.emitted('update:modelValue')!.pop()).toEqual([0]);
+});
+
+test('should update modelValue correctly after clicking the reversed vertical slider', () => {
+  const wrapper = mount(Slider, {
+    props: {
+      reverse: true,
+      vertical: true,
+      modelValue: 50,
+    },
+  });
+
+  trigger(wrapper, 'click', 0, 100);
+  expect(wrapper.emitted('update:modelValue')!.pop()).toEqual([0]);
+});