perf: Modify the class display method in table, tabs, ripple and lazy (…

…#391)
varletjs · Apr 4, 2022 · 25ebec9 · 25ebec9
1 parent 799ba2d
commit 25ebec9
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 34 deletions.
diff --git a/packages/varlet-ui/src/lazy/index.ts b/packages/varlet-ui/src/lazy/index.ts
@@ -2,6 +2,7 @@ import { getAllParentScroller, inViewport } from '../utils/elements'
 import { createCache, removeItem, throttle } from '../utils/shared'
 import type { App, Directive, Plugin, DirectiveBinding } from 'vue'
 import type { CacheInstance } from '../utils/shared'
+import { call } from '../utils/components'
 
 interface LazyOptions {
   loading?: string
@@ -117,7 +118,7 @@ function createLazy(el: LazyHTMLElement, binding: DirectiveBinding<string>) {
 
   setSRC(el, PIXEL)
 
-  defaultLazyOptions.filter?.(el._lazy)
+  call(defaultLazyOptions.filter, el._lazy)
 }
 
 function createImage(el: LazyHTMLElement, attemptSRC: string) {

diff --git a/packages/varlet-ui/src/ripple/index.ts b/packages/varlet-ui/src/ripple/index.ts
@@ -4,6 +4,9 @@ import '../styles/common.less'
 import { supportTouch } from '../utils/elements'
 import type { Directive, Plugin, App } from 'vue'
 import type { DirectiveBinding } from '@vue/runtime-core'
+import { createNamespace } from '../utils/components'
+
+const { n } = createNamespace('ripple')
 
 interface RippleStyles {
   x: number
@@ -69,7 +72,7 @@ function createRipple(this: RippleHTMLElement, event: TouchEvent) {
 
     const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
     const ripple: RippleHTMLElement = document.createElement('div')
-    ripple.classList.add('var-ripple')
+    ripple.classList.add(n())
     ripple.style.opacity = `0`
     ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
     ripple.style.width = `${size}px`

diff --git a/packages/varlet-ui/src/table/Table.vue b/packages/varlet-ui/src/table/Table.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="var-table var-elevation--1 var--box">
-    <div class="var-table__main">
-      <table class="var-table__table" :style="{ width: toSizeUnit(fullWidth) }">
+  <div :class="classes(n(), 'var-elevation--1 var--box')">
+    <div :class="n('main')">
+      <table :class="n('table')" :style="{ width: toSizeUnit(fullWidth) }">
         <slot />
       </table>
     </div>
-    <div class="var-table__footer" v-if="$slots.footer">
+    <div :class="n('footer')" v-if="$slots.footer">
       <slot name="footer" />
     </div>
   </div>
@@ -14,6 +14,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { toSizeUnit } from '../utils/elements'
+import { createNamespace } from '../utils/components'
+
+const { n, classes } = createNamespace('table')
 
 export default defineComponent({
   name: 'VarTable',
@@ -26,6 +29,8 @@ export default defineComponent({
   setup() {
     return {
       toSizeUnit,
+      n,
+      classes,
     }
   },
 })

diff --git a/packages/varlet-ui/src/tabs-items/TabsItems.vue b/packages/varlet-ui/src/tabs-items/TabsItems.vue
@@ -1,12 +1,5 @@
 <template>
-  <var-swipe
-    class="var-tabs-items"
-    ref="swipe"
-    :loop="loop"
-    :touchable="canSwipe"
-    :indicator="false"
-    @change="handleSwipeChange"
-  >
+  <var-swipe :class="n()" ref="swipe" :loop="loop" :touchable="canSwipe" :indicator="false" @change="handleSwipeChange">
     <slot />
   </var-swipe>
 </template>
@@ -19,6 +12,9 @@ import { props } from './props'
 import type { Ref } from 'vue'
 import type { TabsItemsProvider } from './provide'
 import type { TabItemProvider } from '../tab-item/provide'
+import { call, createNamespace } from '../utils/components'
+
+const { n } = createNamespace('tabs-items')
 
 export default defineComponent({
   name: 'VarTabsItems',
@@ -55,7 +51,7 @@ export default defineComponent({
       const tabItem = tabItemList.find(({ index }) => index.value === currentIndex) as TabItemProvider
       const active = tabItem.name.value ?? tabItem.index.value
 
-      props['onUpdate:active']?.(active)
+      call(props['onUpdate:active'], active)
     }
 
     const tabsItemsProvider: TabsItemsProvider = {}
@@ -70,6 +66,7 @@ export default defineComponent({
 
     return {
       swipe,
+      n,
       handleSwipeChange,
     }
   },

diff --git a/packages/varlet-ui/src/tabs/Tabs.vue b/packages/varlet-ui/src/tabs/Tabs.vue
@@ -1,29 +1,33 @@
 <template>
   <component :is="sticky ? 'var-sticky' : Transition" :offset-top="sticky ? offsetTop : null">
     <div
-      class="var-tabs var--box"
-      :class="[
-        `var-tabs--item-${itemDirection}`,
-        `var-tabs--layout-${layoutDirection}-padding`,
-        elevation ? `var-elevation--4` : null,
-        fixedBottom ? 'var-tabs--fixed-bottom' : null,
-      ]"
+      :class="
+        classes(
+          n(),
+          'var--box',
+          n(`--item-${itemDirection}`),
+          n(`--layout-${layoutDirection}-padding`),
+          [elevation, 'var-elevation--4'],
+          [fixedBottom, n('--fixed-bottom')]
+        )
+      "
       :style="{ background: color }"
       v-bind="$attrs"
     >
       <div
-        class="var-tabs__tab-wrap"
         ref="scrollerEl"
-        :class="[
-          scrollable ? `var-tabs--layout-${layoutDirection}-scrollable` : null,
-          `var-tabs--layout-${layoutDirection}`,
-        ]"
+        :class="
+          classes(
+            n('tab-wrap'),
+            [scrollable, n(`--layout-${layoutDirection}-scrollable`)],
+            n(`--layout-${layoutDirection}`)
+          )
+        "
       >
         <slot />
 
         <div
-          class="var-tabs__indicator"
-          :class="[`var-tabs--layout-${layoutDirection}-indicator`]"
+          :class="classes(n('indicator'), n(`--layout-${layoutDirection}-indicator`))"
           :style="{
             width: layoutDirection === 'horizontal' ? indicatorWidth : toSizeUnit(indicatorSize),
             height: layoutDirection === 'horizontal' ? toSizeUnit(indicatorSize) : indicatorHeight,
@@ -46,6 +50,9 @@ import { toSizeUnit, scrollTo, doubleRaf } from '../utils/elements'
 import type { Ref, ComputedRef } from 'vue'
 import type { TabsProvider } from './provide'
 import type { TabProvider } from '../tab/provide'
+import { createNamespace, call } from '../utils/components'
+
+const { n, classes } = createNamespace('tabs')
 
 export default defineComponent({
   name: 'VarTabs',
@@ -70,9 +77,9 @@ export default defineComponent({
       const currentActive = tab.name.value ?? tab.index.value
       const { active, onChange, onClick } = props
 
-      props['onUpdate:active']?.(currentActive)
-      onClick?.(currentActive)
-      currentActive !== active && onChange?.(currentActive)
+      call(props['onUpdate:active'], currentActive)
+      call(onClick, currentActive)
+      currentActive !== active && call(onChange, currentActive)
     }
 
     const matchName = (): TabProvider | undefined => {
@@ -92,8 +99,8 @@ export default defineComponent({
 
       isNumber(active)
         ? active > length.value - 1
-          ? props['onUpdate:active']?.(length.value - 1)
-          : props['onUpdate:active']?.(0)
+          ? call(props['onUpdate:active'], length.value - 1)
+          : call(props['onUpdate:active'], 0)
         : null
 
       return matchIndex()
@@ -184,6 +191,8 @@ export default defineComponent({
       scrollerEl,
       Transition,
       toSizeUnit,
+      n,
+      classes,
       resize,
     }
   },