refactor(components): [virtual-list, visual-hidden] use useNamespace (#6461)

packages/components/virtual-list/src/builders/build-grid.ts

@@ -17,6 +17,7 @@ import {
   isNumber,
   isString,
 } from '@element-plus/utils'
+import { useNamespace } from '@element-plus/hooks'
 import Scrollbar from '../components/scrollbar'
 import { useGridWheel } from '../hooks/use-grid-wheel'
 import { useCache } from '../hooks/use-cache'
@@ -33,7 +34,6 @@ import {
   RTL_OFFSET_POS_DESC,
   SCROLL_EVT,
 } from '../defaults'
-
 import type {
   CSSProperties,
   Ref,
@@ -67,6 +67,8 @@ const createGrid = ({
     props: virtualizedGridProps,
     emits: [ITEM_RENDER_EVT, SCROLL_EVT],
     setup(props, { emit, expose, slots }) {
+      const ns = useNamespace('vl')
+
       validateProps(props)
       const instance = getCurrentInstance()!
       const cache = ref(initCache(props, instance))
@@ -602,7 +604,7 @@ const createGrid = ({
           'div',
           {
             key: 0,
-            class: 'el-vg__wrapper',
+            class: ns.e('wrapper'),
           },
           [
             h(

packages/components/virtual-list/src/builders/build-list.ts

@@ -12,6 +12,7 @@ import {
 } from 'vue'
 import { isClient } from '@vueuse/core'
 import { hasOwn, isNumber, isString } from '@element-plus/utils'
+import { useNamespace } from '@element-plus/hooks'
 import { useCache } from '../hooks/use-cache'
 import useWheel from '../hooks/use-wheel'
 import Scrollbar from '../components/scrollbar'
@@ -52,6 +53,9 @@ const createList = ({
     setup(props, { emit, expose }) {
       validateProps(props)
       const instance = getCurrentInstance()!
+
+      const ns = useNamespace('vl')
+
       const dynamicSizeCache = ref(initCache(props, instance))
 
       const getItemStyleCache = useCache()
@@ -406,6 +410,7 @@ const createList = ({
       })
 
       const api = {
+        ns,
         clientSize,
         estimatedTotalSize,
         windowStyle,
@@ -456,6 +461,7 @@ const createList = ({
         states,
         useIsScrolling,
         windowStyle,
+        ns,
       } = ctx
 
       const [start, end] = itemsToRender
@@ -522,10 +528,7 @@ const createList = ({
         'div',
         {
           key: 0,
-          class: [
-            'el-vl__wrapper',
-            states.scrollbarAlwaysOn ? 'always-on' : '',
-          ],
+          class: [ns.e('wrapper'), states.scrollbarAlwaysOn ? 'always-on' : ''],
         },
         [listContainer, scrollbar]
       )

packages/components/virtual-list/src/components/scrollbar.ts

@@ -14,6 +14,7 @@ import { isClient } from '@vueuse/core'
 import { BAR_MAP } from '@element-plus/components/scrollbar'
 import { cAF, off, on, rAF } from '@element-plus/utils'
 
+import { useNamespace } from '@element-plus/hooks'
 import { HORIZONTAL, SCROLLBAR_MIN_SIZE, ScrollbarDirKey } from '../defaults'
 import { virtualizedScrollbarProps } from '../props'
 import { renderThumbStyle } from '../utils'
@@ -27,6 +28,8 @@ const ScrollBar = defineComponent({
   setup(props, { emit }) {
     const GAP = 4 // top 2 + bottom 2 | left 2 + right 2
 
+    const nsVirtualScrollbar = useNamespace('virtual-scrollbar')
+    const nsScrollbar = useNamespace('scrollbar')
     // DOM refs
     const trackRef = ref<HTMLElement>()
     const thumbRef = ref<HTMLElement>()
@@ -260,7 +263,7 @@ const ScrollBar = defineComponent({
         {
           role: 'presentation',
           ref: trackRef,
-          class: 'el-virtual-scrollbar',
+          class: nsVirtualScrollbar.b(),
           style: trackStyle.value,
           onMousedown: withModifiers(clickTrackHandler, ['stop', 'prevent']),
         },
@@ -268,7 +271,7 @@ const ScrollBar = defineComponent({
           'div',
           {
             ref: thumbRef,
-            class: 'el-scrollbar__thumb',
+            class: nsScrollbar.e('thumb'),
             style: thumbStyle.value,
             onMousedown: onThumbMouseDown,
           },