refactor(components): [switch] add namespace (#5455)

packages/components/switch/src/switch.vue

@@ -9,7 +9,7 @@
     <input
       :id="id"
       ref="input"
-      class="el-switch__input"
+      :class="ns.e('input')"
       type="checkbox"
       :name="name"
       :true-value="activeValue"
@@ -21,8 +21,8 @@
     <span
       v-if="!inlinePrompt && (inactiveIcon || inactiveText)"
       :class="[
-        'el-switch__label',
-        'el-switch__label--left',
+        ns.e('label'),
+        ns.em('label', 'left'),
         !checked ? 'is-active' : '',
       ]"
     >
@@ -33,10 +33,10 @@
     </span>
     <span
       ref="core"
-      class="el-switch__core"
+      :class="ns.e('core')"
       :style="{ width: (width || 40) + 'px' }"
     >
-      <div v-if="inlinePrompt" class="el-switch__inner">
+      <div v-if="inlinePrompt" :class="ns.e('inner')">
         <template v-if="activeIcon || inactiveIcon">
           <el-icon
             v-if="activeIcon"
@@ -72,15 +72,15 @@
           </span>
         </template>
       </div>
-      <div class="el-switch__action">
+      <div :class="ns.e('action')">
         <el-icon v-if="loading" class="is-loading"><loading /></el-icon>
       </div>
     </span>
     <span
       v-if="!inlinePrompt && (activeIcon || activeText)"
       :class="[
-        'el-switch__label',
-        'el-switch__label--right',
+        ns.e('label'),
+        ns.em('label', 'right'),
         checked ? 'is-active' : '',
       ]"
     >
@@ -104,7 +104,12 @@ import {
   CHANGE_EVENT,
   INPUT_EVENT,
 } from '@element-plus/utils/constants'
-import { useDisabled, useFormItem, useSize } from '@element-plus/hooks'
+import {
+  useDisabled,
+  useFormItem,
+  useNamespace,
+  useSize,
+} from '@element-plus/hooks'
 import { switchProps, switchEmits } from './switch'
 
 const COMPONENT_NAME = 'ElSwitch'
@@ -119,16 +124,16 @@ export default defineComponent({
   setup(props, { emit }) {
     const { formItem } = useFormItem()
     const switchDisabled = useDisabled(computed(() => props.loading))
+    const ns = useNamespace('switch')
 
     const switchSize = useSize()
     const isModelValue = ref(props.modelValue !== false)
     const input = ref<HTMLInputElement>()
     const core = ref<HTMLSpanElement>()
 
-    const prefix = 'el-switch'
     const switchKls = computed(() => [
-      prefix,
-      `${prefix}--${switchSize.value}`,
+      ns.b(),
+      ns.m(switchSize.value),
       switchDisabled.value ? 'is-disabled' : '',
       checked.value ? 'is-checked' : '',
     ])
@@ -239,6 +244,7 @@ export default defineComponent({
     })
 
     return {
+      ns,
       input,
       core,
       switchDisabled,