perf(tab&swipe-item): add class

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

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/varlet-ui/src/swipe-item/SwipeItem.vue b/packages/varlet-ui/src/swipe-item/SwipeItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="var-swipe-item"
+    :class="n()"
     :style="{
       width: !vertical ? `${size}px` : undefined,
       height: vertical ? `${size}px` : undefined,
@@ -14,9 +14,12 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { useSwipe } from './provide'
+import { createNamespace } from '../utils/components'
 import type { Ref } from 'vue'
 import type { SwipeItemProvider } from './provide'
 
+const { n } = createNamespace('swipe-item')
+
 export default defineComponent({
   name: 'VarSwipeItem',
   setup() {
@@ -36,6 +39,7 @@ export default defineComponent({
     bindSwipe(swipeItemProvider)
 
     return {
+      n,
       size,
       vertical,
       translate,

diff --git a/packages/varlet-ui/src/tab/Tab.vue b/packages/varlet-ui/src/tab/Tab.vue
@@ -1,9 +1,8 @@
 <template>
   <div
-    class="var-tab var--box"
+    :class="classes(n(), 'var--box', computeColorClass(), n(`--${itemDirection}`))"
     ref="tabEl"
     v-ripple="{ disabled }"
-    :class="[computeColorClass(), `var-tab--${itemDirection}`]"
     :style="{
       color: computeColorStyle(),
     }"
@@ -17,10 +16,13 @@
 import Ripple from '../ripple'
 import { defineComponent, ref, computed, watch } from 'vue'
 import { props } from './props'
+import { createNamespace } from '../utils/components'
 import { useTabs } from './provide'
 import type { Ref, ComputedRef } from 'vue'
 import type { TabProvider } from './provide'
 
+const { n, classes } = createNamespace('tab')
+
 export default defineComponent({
   name: 'VarTab',
   directives: { Ripple },
@@ -77,6 +79,8 @@ export default defineComponent({
     watch(() => props.disabled, resize)
 
     return {
+      n,
+      classes,
       tabEl,
       active,
       activeColor,