refactor(components): [scrollbar] use useNamespace (#5732)

packages/components/scrollbar/src/scrollbar.vue

@@ -1,11 +1,11 @@
 <template>
-  <div ref="scrollbar$" class="el-scrollbar">
+  <div ref="scrollbar$" :class="ns.b()">
     <div
       ref="wrap$"
       :class="[
         wrapClass,
-        'el-scrollbar__wrap',
-        native ? '' : 'el-scrollbar__wrap--hidden-default',
+        ns.e('wrap'),
+        { [ns.em('wrap', 'hidden-default')]: !native },
       ]"
       :style="style"
       @scroll="handleScroll"
@@ -13,7 +13,7 @@
       <component
         :is="tag"
         ref="resize$"
-        :class="['el-scrollbar__view', viewClass]"
+        :class="[ns.e('view'), viewClass]"
         :style="viewStyle"
       >
         <slot />
@@ -46,6 +46,7 @@ import { useResizeObserver, useEventListener } from '@vueuse/core'
 import { addUnit, isNumber } from '@element-plus/utils/util'
 import { debugWarn } from '@element-plus/utils/error'
 import { scrollbarContextKey } from '@element-plus/tokens'
+import { useNamespace } from '@element-plus/hooks'
 import Bar from './bar.vue'
 
 import { scrollbarProps, scrollbarEmits } from './scrollbar'
@@ -60,6 +61,8 @@ export default defineComponent({
   emits: scrollbarEmits,
 
   setup(props, { emit }) {
+    const ns = useNamespace('scrollbar')
+
     let stopResizeObserver: (() => void) | undefined = undefined
     let stopResizeListener: (() => void) | undefined = undefined
 
@@ -162,6 +165,7 @@ export default defineComponent({
     })
 
     return {
+      ns,
       scrollbar$,
       wrap$,
       resize$,

packages/components/scrollbar/src/thumb.vue

@@ -1,14 +1,14 @@
 <template>
-  <transition name="el-scrollbar-fade">
+  <transition :name="ns.b('fade')">
     <div
       v-show="always || visible"
       ref="instance"
-      :class="['el-scrollbar__bar', 'is-' + bar.key]"
+      :class="[ns.e('bar'), ns.is(bar.key)]"
       @mousedown="clickTrackHandler"
     >
       <div
         ref="thumb"
-        class="el-scrollbar__thumb"
+        :class="ns.e('thumb')"
         :style="thumbStyle"
         @mousedown="clickThumbHandler"
       ></div>
@@ -28,6 +28,7 @@ import {
 import { useEventListener, isClient } from '@vueuse/core'
 import { scrollbarContextKey } from '@element-plus/tokens'
 import { throwError } from '@element-plus/utils/error'
+import { useNamespace } from '@element-plus/hooks'
 import { BAR_MAP, renderThumbStyle } from './util'
 
 import { thumbProps } from './thumb'
@@ -39,6 +40,8 @@ export default defineComponent({
 
   setup(props) {
     const scrollbar = inject(scrollbarContextKey)
+    const ns = useNamespace('scrollbar')
+
     if (!scrollbar)
       throwError(COMPONENT_NAME, 'can not inject scrollbar context')
 
@@ -181,6 +184,7 @@ export default defineComponent({
     )
 
     return {
+      ns,
       instance,
       thumb,
       bar,