feat: 修复 slider 样式问题 (#2011)

Tencent · Nov 14, 2022 · 1f22b40 · 1f22b40
1 parent ea31a27
commit 1f22b40
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 44 deletions.
diff --git a/src/slider/hooks/useSliderMark.tsx b/src/slider/hooks/useSliderMark.tsx
@@ -66,32 +66,32 @@ export const useSliderMark = (config: Ref<useSliderMarkProps>) => {
   });
 
   const renderMask = (onChangeFn?: (point: number) => void): VNode => {
-    if (markList.value.length) {
-      return (
-        <div>
-          <div>
-            {markList.value.map((item, index) => (
-              <div
-                class={`${name}__stop ${name}__mark-stop`}
-                style={getStopStyle(item.position, config.value.vertical)}
-                key={index}
-              />
-            ))}
-          </div>
-          <div class={`${name}__mark`}>
-            {markList.value.map((item, key) => (
-              <TSliderMark
-                mark={item.mark as any}
-                point={item.point}
-                key={key}
-                style={getStopStyle(item.position, config.value.vertical)}
-                onClickMarkPoint={onChangeFn}
-              />
-            ))}
-          </div>
+    if (!markList.value.length) return null;
+
+    return (
+      <div>
+        <div class={`${name}__stops`}>
+          {markList.value.map((item, index) => (
+            <div
+              class={`${name}__stop ${name}__mark-stop`}
+              style={getStopStyle(item.position, config.value.vertical)}
+              key={index}
+            />
+          ))}
         </div>
-      );
-    }
+        <div class={`${name}__mark`}>
+          {markList.value.map((item, key) => (
+            <TSliderMark
+              mark={item.mark as any}
+              point={item.point}
+              key={key}
+              style={getStopStyle(item.position, config.value.vertical)}
+              onClickMarkPoint={onChangeFn}
+            />
+          ))}
+        </div>
+      </div>
+    );
   };
 
   return renderMask;

diff --git a/src/slider/slider.tsx b/src/slider/slider.tsx
@@ -18,7 +18,7 @@ import { useFormDisabled } from '../form/hooks';
 import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { useSliderMark } from './hooks/useSliderMark';
 import { useSliderInput } from './hooks/useSliderInput';
-import { formatSlderValue, getStopStyle } from './util/common';
+import { formatSliderValue, getStopStyle } from './util/common';
 import { sliderPropsInjectKey } from './util/constants';
 import useVModel from '../hooks/useVModel';
 
@@ -45,12 +45,8 @@ export default defineComponent({
     const firstButtonRef = ref<SliderButtonType>();
     const secondButtonRef = ref<SliderButtonType>();
 
-    // const sliderState = reactive({
-    //   // TODO: 该属性应该是暴露出来的api供用户配置才对
-    //   showSteps: true,
-    // });
-    const firstValue = ref(formatSlderValue(sliderValue.value, 'first'));
-    const secondValue = ref(formatSlderValue(sliderValue.value, 'second'));
+    const firstValue = ref(formatSliderValue(sliderValue.value, 'first'));
+    const secondValue = ref(formatSliderValue(sliderValue.value, 'second'));
     const dragging = ref(false);
     const sliderSize = ref(1);
 
@@ -413,7 +409,7 @@ export default defineComponent({
               />
             )}
             {props.showStep && (
-              <div>
+              <div class={`${COMPONENT_NAME.value}__stops`}>
                 {steps.value.map((item, key) => (
                   <div class={`${COMPONENT_NAME.value}__stop`} key={key} style={getStopStyle(item, vertical.value)} />
                 ))}

diff --git a/src/slider/util/common.ts b/src/slider/util/common.ts
@@ -15,7 +15,7 @@ export const getStopStyle = (position: number, isVertical: boolean) => {
  * @param type 第一个滑块or第二个滑块值
  * @returns {number}
  */
-export const formatSlderValue = (val: number | number[], type: 'first' | 'second') => {
+export const formatSliderValue = (val: number | number[], type: 'first' | 'second') => {
   if (type === 'first') {
     if (val instanceof Array) {
       return val[0];

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -105392,7 +105392,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/marks.vue 1`] = `
           <!---->
           <!---->
           <div>
-            <div>
+            <div
+              class="t-slider__stops"
+            >
 
               <div
                 class="t-slider__stop t-slider__mark-stop"
@@ -105532,7 +105534,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/marks.vue 1`] = `
           </div>
           <!---->
           <div>
-            <div>
+            <div
+              class="t-slider__stops"
+            >
 
               <div
                 class="t-slider__stop t-slider__mark-stop"
@@ -105655,7 +105659,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/marks.vue 1`] = `
           <!---->
           <!---->
           <div>
-            <div>
+            <div
+              class="t-slider__stops"
+            >
 
               <div
                 class="t-slider__stop t-slider__mark-stop"
@@ -105764,7 +105770,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/min-and-max.vue 1`]
           <!---->
           <!---->
           <div>
-            <div>
+            <div
+              class="t-slider__stops"
+            >
 
               <div
                 class="t-slider__stop t-slider__mark-stop"
@@ -105856,7 +105864,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/min-and-max.vue 1`]
           </div>
           <!---->
           <div>
-            <div>
+            <div
+              class="t-slider__stops"
+            >
 
               <div
                 class="t-slider__stop t-slider__mark-stop"
@@ -106190,7 +106200,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/vertical-marks.vue 1
             <!---->
             <!---->
             <div>
-              <div>
+              <div
+                class="t-slider__stops"
+              >
 
                 <div
                   class="t-slider__stop t-slider__mark-stop"
@@ -106336,7 +106348,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/vertical-marks.vue 1
             </div>
             <!---->
             <div>
-              <div>
+              <div
+                class="t-slider__stops"
+              >
 
                 <div
                   class="t-slider__stop t-slider__mark-stop"