perf(step): add class

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

Hide file tree

Showing 5 changed files with 116 additions and 117 deletions.
diff --git a/packages/varlet-ui/src/snackbar/Snackbar.vue b/packages/varlet-ui/src/snackbar/Snackbar.vue
@@ -1,7 +1,7 @@
 <template>
   <teleport :to="teleport" :disabled="disabled">
     <transition :name="`${n()}-fade`" @after-enter="onOpened" @after-leave="onClosed">
-      <var-snackbar-core v-bind="$props" class="var-snackbar__transition">
+      <var-snackbar-core v-bind="$props" :class="n('transition')">
         <slot>{{ content }}</slot>
         <template #action>
           <slot name="action" />

diff --git a/packages/varlet-ui/src/step/Step.vue b/packages/varlet-ui/src/step/Step.vue
@@ -1,31 +1,25 @@
 <template>
-  <div class="var-step">
-    <div :class="`var-step-${direction}`">
-      <div :class="`var-step-${direction}__main`" :ref="getRef">
+  <div :class="n()">
+    <div :class="n(direction)">
+      <div :class="n(`${direction}-main`)" :ref="getRef">
         <div
-          :class="{
-            [`var-step-${direction}__tag`]: true,
-            [`var-step-${direction}__tag--active`]: isActive || isCurrent,
-          }"
+          :class="classes(n(`${direction}-tag`), [isActive || isCurrent, n(`${direction}-tag--active`)])"
           :style="{ backgroundColor: isActive || isCurrent ? activeColor : inactiveColor }"
           @click="click"
         >
-          <var-icon class="var-step__icon" var-step-cover :name="activeIcon" v-if="isActive" />
-          <var-icon class="var-step__icon" var-step-cover :name="currentIcon" v-else-if="isCurrent && currentIcon" />
-          <var-icon class="var-step__icon" var-step-cover :name="inactiveIcon" v-else-if="inactiveIcon" />
+          <var-icon :class="n('icon')" var-step-cover :name="activeIcon" v-if="isActive" />
+          <var-icon :class="n('icon')" var-step-cover :name="currentIcon" v-else-if="isCurrent && currentIcon" />
+          <var-icon :class="n('icon')" var-step-cover :name="inactiveIcon" v-else-if="inactiveIcon" />
           <span v-else>{{ index + 1 }}</span>
         </div>
         <div
-          :class="{
-            [`var-step-${direction}__content`]: true,
-            [`var-step-${direction}__content--active`]: isActive || isCurrent,
-          }"
+          :class="classes(n(`${direction}-content`), [isActive || isCurrent, n(`${direction}-content--active`)])"
           @click="click"
         >
           <slot />
         </div>
       </div>
-      <div :class="`var-step-${direction}__line`" v-if="!isLastChild" :style="{ margin: lineMargin }"></div>
+      <div :class="n(`${direction}-line`)" v-if="!isLastChild" :style="{ margin: lineMargin }"></div>
     </div>
   </div>
 </template>
@@ -35,9 +29,12 @@ import { computed, defineComponent, ref, watch } from 'vue'
 import { props } from './props'
 import { useSteps } from './provide'
 import VarIcon from '../icon'
+import { createNamespace } from '../utils/components'
 import type { Ref, ComputedRef, ComponentPublicInstance } from 'vue'
 import type { StepProvider } from './provide'
 
+const { n, classes } = createNamespace('step')
+
 export default defineComponent({
   name: 'VarStep',
   components: {
@@ -79,6 +76,8 @@ export default defineComponent({
     })
 
     return {
+      n,
+      classes,
       main,
       index,
       isActive,

diff --git a/packages/varlet-ui/src/step/step.less b/packages/varlet-ui/src/step/step.less
@@ -63,18 +63,18 @@
   flex: 1;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  &-horizontal {
+  &__horizontal {
     display: flex;
     width: 100%;
 
-    &__main {
+    &-main {
       display: flex;
       flex-direction: column;
       align-items: center;
       flex-basis: 100%;
     }
 
-    &__tag {
+    &-tag {
       margin: var(--step-tag-margin);
       .tag();
 
@@ -83,15 +83,15 @@
       }
     }
 
-    &__content {
+    &-content {
       .content();
 
       &--active {
         color: var(--step-content-active-color);
       }
     }
 
-    &__line {
+    &-line {
       position: relative;
       top: 14px;
       flex: 1;
@@ -101,16 +101,16 @@
     }
   }
 
-  &-vertical {
+  &__vertical {
     width: 100%;
 
-    &__main {
+    &-main {
       display: flex;
       align-items: flex-start;
       min-height: var(--step-vertical-min-height);
     }
 
-    &__tag {
+    &-tag {
       margin: var(--step-vertical-tag-margin);
       .tag();
 
@@ -119,15 +119,15 @@
       }
     }
 
-    &__content {
+    &-content {
       .content();
 
       &--active {
         color: var(--step-content-active-color);
       }
     }
 
-    &__line {
+    &-line {
       position: relative;
       height: var(--step-vertical-line-height);
       left: 14px;