refactor(components): [slider] use useNamespace (#5743)

packages/components/slider/src/button.vue

@@ -1,8 +1,7 @@
 <template>
   <div
     ref="button"
-    class="el-slider__button-wrapper"
-    :class="{ hover: hovering, dragging: dragging }"
+    :class="[ns.e('button-wrapper'), { hover: hovering, dragging }]"
     :style="wrapperStyle"
     tabindex="0"
     @mouseenter="handleMouseEnter"
@@ -28,10 +27,7 @@
       <template #content>
         <span>{{ formatValue }}</span>
       </template>
-      <div
-        class="el-slider__button"
-        :class="{ hover: hovering, dragging: dragging }"
-      ></div>
+      <div :class="[ns.e('button'), { hover: hovering, dragging }]"></div>
     </el-tooltip>
   </div>
 </template>
@@ -40,6 +36,7 @@
 import { defineComponent, reactive, toRefs } from 'vue'
 import ElTooltip from '@element-plus/components/tooltip'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { useNamespace } from '@element-plus/hooks'
 import { useSliderButton } from './useSliderButton'
 
 export default defineComponent({
@@ -67,6 +64,7 @@ export default defineComponent({
   emits: [UPDATE_MODEL_EVENT],
 
   setup(props, { emit }) {
+    const ns = useNamespace('slider')
     const initData = reactive({
       hovering: false,
       dragging: false,
@@ -97,6 +95,7 @@ export default defineComponent({
     const { hovering, dragging } = toRefs(initData)
 
     return {
+      ns,
       tooltip,
       tooltipVisible,
       showTooltip,

packages/components/slider/src/index.vue

@@ -10,12 +10,14 @@
   >
     <div
       ref="slider"
-      class="el-slider__runway"
-      :class="{ 'show-input': showInput && !range, disabled: sliderDisabled }"
+      :class="[
+        ns.e('runway'),
+        { 'show-input': showInput && !range, disabled: sliderDisabled },
+      ]"
       :style="runwayStyle"
       @click="onSliderClick"
     >
-      <div class="el-slider__bar" :style="barStyle"></div>
+      <div :class="ns.e('bar')" :style="barStyle"></div>
       <slider-button
         ref="firstButton"
         :model-value="firstValue"
@@ -35,7 +37,7 @@
         <div
           v-for="(item, key) in stops"
           :key="key"
-          class="el-slider__stop"
+          :class="ns.e('stop')"
           :style="getStopStyle(item)"
         ></div>
       </div>
@@ -45,10 +47,10 @@
             v-for="(item, key) in markList"
             :key="key"
             :style="getStopStyle(item.position)"
-            class="el-slider__stop el-slider__marks-stop"
+            :class="[ns.e('stop'), ns.e('marks-stop')]"
           ></div>
         </div>
-        <div class="el-slider__marks">
+        <div :class="ns.e('marks')">
           <slider-marker
             v-for="(item, key) in markList"
             :key="key"
@@ -62,7 +64,7 @@
       v-if="showInput && !range"
       ref="input"
       :model-value="firstValue"
-      class="el-slider__input"
+      :class="ns.e('input')"
       :step="step"
       :disabled="sliderDisabled"
       :controls="showInputControls"
@@ -97,7 +99,7 @@ import {
 } from '@element-plus/constants'
 import { off, on } from '@element-plus/utils/dom'
 import { throwError, isValidComponentSize } from '@element-plus/utils-v2'
-import { useSize } from '@element-plus/hooks'
+import { useNamespace, useSize } from '@element-plus/hooks'
 import SliderButton from './button.vue'
 import SliderMarker from './marker.vue'
 import { useMarks } from './useMarks'
@@ -196,6 +198,7 @@ export default defineComponent({
   emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT],
 
   setup(props, { emit }) {
+    const ns = useNamespace('slider')
     const initData = reactive({
       firstValue: 0,
       secondValue: 0,
@@ -233,12 +236,11 @@ export default defineComponent({
       () => props.inputSize || sliderWrapperSize.value
     )
 
-    const prefix = 'el-slider'
     const sliderKls = computed(() => [
-      prefix,
-      `${prefix}--${sliderWrapperSize.value}`,
-      props.vertical ? 'is-vertical' : '',
-      props.showInput ? 'el-slider--with-input' : '',
+      ns.b(),
+      ns.m(sliderWrapperSize.value),
+      ns.is('vertical', props.vertical),
+      { [ns.m('with-input')]: props.showInput },
     ])
 
     const markList = useMarks(props)
@@ -273,6 +275,7 @@ export default defineComponent({
     })
 
     return {
+      ns,
       firstValue,
       secondValue,
       oldValue,

packages/components/slider/src/marker.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, h } from 'vue'
 
+import { useNamespace } from '@element-plus/hooks'
 import type { PropType } from 'vue'
 
 export default defineComponent({
@@ -12,11 +13,13 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const ns = useNamespace('slider')
     const label = computed(() => {
       return typeof props.mark === 'string' ? props.mark : props.mark.label
     })
 
     return {
+      ns,
       label,
     }
   },
@@ -24,7 +27,7 @@ export default defineComponent({
     return h(
       'div',
       {
-        class: 'el-slider__marks-text',
+        class: this.ns.e('marks-text'),
         style: this.mark?.style,
       },
       this.label