refactor(slider): fix bem

varletjs · Apr 6, 2022 · 26c56a3 · 26c56a3
1 parent ea062e8
commit 26c56a3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 26 deletions.
diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
@@ -1,11 +1,7 @@
 <template>
   <div :class="n()">
     <div
-      :class="classes(
-        n('block'),
-        [isDisabled, n('--disabled')],
-        [errorMessage, n('--error')]
-      )"
+      :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`,
@@ -46,20 +42,14 @@
             }"
           ></div>
           <div
-            :class="classes(
-              n('thumb-ripple'),
-              [thumbsProps[item.enumValue].active, n('thumb-ripple-active')]
-            )"
+            :class="classes(n('thumb-ripple'), [thumbsProps[item.enumValue].active, n('thumb-ripple--active')])"
             :style="{
               background: thumbColor,
               ...getRippleSize(item),
             }"
           ></div>
           <div
-            :class="classes(
-              n('thumb-label'),
-              [showLabel(item.enumValue), n('thumb-label-active')]
-            )"
+            :class="classes(n('thumb-label'), [showLabel(item.enumValue), n('thumb-label--active')])"
             :style="{
               background: labelColor,
               color: labelTextColor,

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
@@ -50,12 +50,12 @@ exports[`test slider example 1`] = `
       <div class=\\"var-slider__thumb\\" style=\\"left: 24%;\\">
         <div class=\\"var-slider__thumb-block\\"></div>
         <div class=\\"var-slider__thumb-ripple\\"></div>
-        <div class=\\"var-slider__thumb-label var-slider__thumb-label-active\\"><span>24</span></div>
+        <div class=\\"var-slider__thumb-label var-slider__thumb-label--active\\"><span>24</span></div>
       </div>
       <div class=\\"var-slider__thumb\\" style=\\"left: 50%;\\">
         <div class=\\"var-slider__thumb-block\\"></div>
         <div class=\\"var-slider__thumb-ripple\\"></div>
-        <div class=\\"var-slider__thumb-label var-slider__thumb-label-active\\"><span>50</span></div>
+        <div class=\\"var-slider__thumb-label var-slider__thumb-label--active\\"><span>50</span></div>
       </div>
     </div>
     <transition-stub class=\\"var-slider__form\\" var-slider-cover=\\"\\">
@@ -207,7 +207,7 @@ exports[`test slider example 1`] = `
       <div class=\\"var-slider__thumb\\" style=\\"left: 50%;\\">
         <div class=\\"var-slider__thumb-block\\"></div>
         <div class=\\"var-slider__thumb-ripple\\"></div>
-        <div class=\\"var-slider__thumb-label var-slider__thumb-label-active\\"><span>50</span></div>
+        <div class=\\"var-slider__thumb-label var-slider__thumb-label--active\\"><span>50</span></div>
       </div>
     </div>
     <transition-stub class=\\"var-slider__form\\" var-slider-cover=\\"\\">

diff --git a/packages/varlet-ui/src/slider/__tests__/index.spec.js b/packages/varlet-ui/src/slider/__tests__/index.spec.js
@@ -82,35 +82,35 @@ test('test slider labelVisible prop', async () => {
   })
 
   const el = wrapper.find('.var-slider__thumb-label')
-  expect(el.classes()).not.toContain('var-slider__thumb-label-active')
+  expect(el.classes()).not.toContain('var-slider__thumb-label--active')
 
   await trigger(el, 'touchstart', 0, 0)
   await trigger(el, 'touchmove', 0, 0)
 
-  expect(el.classes()).toContain('var-slider__thumb-label-active')
+  expect(el.classes()).toContain('var-slider__thumb-label--active')
 
   await trigger(el, 'touchend', 0, 0)
 
-  expect(el.classes()).not.toContain('var-slider__thumb-label-active')
+  expect(el.classes()).not.toContain('var-slider__thumb-label--active')
 
   await wrapper.setData({ visible: 'never' })
 
-  expect(el.classes()).not.toContain('var-slider__thumb-label-active')
+  expect(el.classes()).not.toContain('var-slider__thumb-label--active')
 
   await trigger(el, 'touchstart', 0, 0)
   await trigger(el, 'touchmove', 0, 0)
-  expect(el.classes()).not.toContain('var-slider__thumb-label-active')
+  expect(el.classes()).not.toContain('var-slider__thumb-label--active')
 
   await wrapper.setData({ visible: 'always' })
 
-  expect(el.classes()).toContain('var-slider__thumb-label-active')
+  expect(el.classes()).toContain('var-slider__thumb-label--active')
 
   await trigger(el, 'touchstart', 0, 0)
   await trigger(el, 'touchmove', 0, 0)
-  expect(el.classes()).toContain('var-slider__thumb-label-active')
+  expect(el.classes()).toContain('var-slider__thumb-label--active')
 
   await trigger(el, 'touchend', 0, 0)
-  expect(el.classes()).toContain('var-slider__thumb-label-active')
+  expect(el.classes()).toContain('var-slider__thumb-label--active')
 })
 
 test('test step prop', async () => {

diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less
@@ -78,7 +78,7 @@
       background: var(--slider-thumb-ripple-background);
       transition: 0.3s var(--cubic-bezier);
 
-      &-active {
+      &--active {
         width: 36px;
         height: 36px;
       }
@@ -107,7 +107,7 @@
         transform: rotate(-45deg);
       }
 
-      &-active {
+      &--active {
         transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);
       }
     }