fix(slider): support dimension units #553

varletjs · May 16, 2022 · dacab1b · dacab1b
1 parent b6e4d35
commit dacab1b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
@@ -3,8 +3,8 @@
     <div
       :class="classes(n('block'), [isDisabled, n('--disabled')], [errorMessage, n('--error')])"
       :style="{
-        height: thumbSize === undefined ? thumbSize : `${3 * toNumber(thumbSize)}px`,
-        margin: thumbSize === undefined ? thumbSize : `0 ${toNumber(thumbSize) / 2}px`,
+        height: thumbSize === undefined ? thumbSize : multiplySizeUnit(thumbSize, 3),
+        margin: thumbSize === undefined ? thumbSize : `0 ${multiplySizeUnit(thumbSize, 0.5)}`,
       }"
       ref="sliderEl"
       @click="click"
@@ -14,7 +14,7 @@
           :class="n('track-background')"
           :style="{
             background: trackColor,
-            height: trackHeight + 'px',
+            height: multiplySizeUnit(trackHeight),
           }"
         ></div>
         <div :class="n('track-fill')" :style="getFillStyle"></div>
@@ -37,8 +37,8 @@
             :class="n('thumb-block')"
             :style="{
               background: thumbColor,
-              height: thumbSize + 'px',
-              width: thumbSize + 'px',
+              height: multiplySizeUnit(thumbSize),
+              width: multiplySizeUnit(thumbSize),
             }"
           ></div>
           <div
@@ -53,8 +53,8 @@
             :style="{
               background: labelColor,
               color: labelTextColor,
-              height: thumbSize === undefined ? thumbSize : `${2 * toNumber(thumbSize)}px`,
-              width: thumbSize === undefined ? thumbSize : `${2 * toNumber(thumbSize)}px`,
+              height: thumbSize === undefined ? thumbSize : multiplySizeUnit(thumbSize, 2),
+              width: thumbSize === undefined ? thumbSize : multiplySizeUnit(thumbSize, 2),
             }"
           >
             <span>{{ item.value }}</span>
@@ -70,7 +70,7 @@
 import { defineComponent, ref, onMounted, computed, reactive, nextTick, watch } from 'vue'
 import { useValidation, createNamespace, call } from '../utils/components'
 import { useForm } from '../form/provide'
-import { getLeft } from '../utils/elements'
+import { getLeft, multiplySizeUnit } from '../utils/elements'
 import { isArray, isNumber, toNumber } from '../utils/shared'
 import { props } from './props'
 import VarFormDetails from '../form-details'
@@ -149,7 +149,7 @@ export default defineComponent({
       let size: string | undefined
 
       if (props.thumbSize !== undefined) {
-        size = thumbsProps[item.enumValue].active ? `${3 * toNumber(props.thumbSize)}px` : '0px'
+        size = thumbsProps[item.enumValue].active ? multiplySizeUnit(props.thumbSize, 3) : '0px'
       }
 
       return {
@@ -343,6 +343,7 @@ export default defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      multiplySizeUnit,
       toNumber,
       getRippleSize,
       showLabel,

diff --git a/packages/varlet-ui/src/slider/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/slider/__tests__/__snapshots__/index.spec.js.snap
@@ -93,20 +93,20 @@ exports[`test slider example 1`] = `
 </div>
 <div class=\\"app-type\\">不同大小</div>
 <div class=\\"var-slider\\">
-  <div class=\\"var-slider__block\\" style=\\"height: 24px; margin: 0px 4px;\\">
+  <div class=\\"var-slider__block\\" style=\\"height: 7.199999999999999vw; margin: 0px 1.2vw;\\">
     <div class=\\"var-slider__track\\">
-      <div class=\\"var-slider__track-background\\" style=\\"height: 4px;\\"></div>
+      <div class=\\"var-slider__track-background\\" style=\\"height: 1vw;\\"></div>
       <div class=\\"var-slider__track-fill\\" style=\\"width: 57%; left: 7%;\\"></div>
     </div>
     <div class=\\"var-slider__thumb\\" style=\\"left: 7%;\\">
-      <div class=\\"var-slider__thumb-block\\" style=\\"height: 8px; width: 8px;\\"></div>
+      <div class=\\"var-slider__thumb-block\\" style=\\"height: 2.4vw; width: 2.4vw;\\"></div>
       <div class=\\"var-slider__thumb-ripple\\" style=\\"height: 0px; width: 0px;\\"></div>
-      <div class=\\"var-slider__thumb-label\\" style=\\"height: 16px; width: 16px;\\"><span>7</span></div>
+      <div class=\\"var-slider__thumb-label\\" style=\\"height: 4.8vw; width: 4.8vw;\\"><span>7</span></div>
     </div>
     <div class=\\"var-slider__thumb\\" style=\\"left: 64%;\\">
-      <div class=\\"var-slider__thumb-block\\" style=\\"height: 8px; width: 8px;\\"></div>
+      <div class=\\"var-slider__thumb-block\\" style=\\"height: 2.4vw; width: 2.4vw;\\"></div>
       <div class=\\"var-slider__thumb-ripple\\" style=\\"height: 0px; width: 0px;\\"></div>
-      <div class=\\"var-slider__thumb-label\\" style=\\"height: 16px; width: 16px;\\"><span>64</span></div>
+      <div class=\\"var-slider__thumb-label\\" style=\\"height: 4.8vw; width: 4.8vw;\\"><span>64</span></div>
     </div>
   </div>
   <transition-stub class=\\"var-slider__form\\" var-slider-cover=\\"\\">

diff --git a/packages/varlet-ui/src/slider/example/index.vue b/packages/varlet-ui/src/slider/example/index.vue
@@ -45,7 +45,7 @@ watchDarkMode(dark)
   <var-slider v-model="values.value3" readonly />
 
   <app-type>{{ pack.sliderSize }}</app-type>
-  <var-slider v-model="values.value10" track-height="4" thumb-size="8" range />
+  <var-slider v-model="values.value10" track-height="1vw" thumb-size="2.4vw" range />
 
   <app-type>{{ pack.customStyle }}</app-type>
   <var-slider