From 99d3f0902bdaef73ada024c30b81521c09a7bb81 Mon Sep 17 00:00:00 2001
From: bqy <1743369777@qq.com>
Date: Wed, 9 Feb 2022 12:13:38 +0800
Subject: [PATCH] refactor(components): [space] use useNamespace (#5749)

---
 packages/components/space/src/item.vue     | 7 +++++--
 packages/components/space/src/use-space.ts | 9 ++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/components/space/src/item.vue b/packages/components/space/src/item.vue
index 3ed2ab3ffe..b70b3201d7 100644
--- a/packages/components/space/src/item.vue
+++ b/packages/components/space/src/item.vue
@@ -7,11 +7,12 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { buildProps } from '@element-plus/utils/props'
+import { useNamespace } from '@element-plus/hooks'
 
 const spaceItem = buildProps({
   prefixCls: {
     type: String,
-    default: 'el-space',
+    default: '',
   },
 } as const)
 
@@ -19,7 +20,9 @@ export default defineComponent({
   props: spaceItem,
 
   setup(props) {
-    const classes = computed(() => [`${props.prefixCls}__item`])
+    const ns = useNamespace('space')
+
+    const classes = computed(() => `${props.prefixCls || ns.b()}__item`)
 
     return {
       classes,
diff --git a/packages/components/space/src/use-space.ts b/packages/components/space/src/use-space.ts
index 8ab29ef34c..c2abaf62ed 100644
--- a/packages/components/space/src/use-space.ts
+++ b/packages/components/space/src/use-space.ts
@@ -1,5 +1,6 @@
 import { ref, computed, watchEffect } from 'vue'
 import { isNumber } from '@element-plus/utils/util'
+import { useNamespace } from '@element-plus/hooks'
 import type { SpaceProps } from './space'
 
 import type { CSSProperties, StyleValue } from 'vue'
@@ -12,11 +13,9 @@ const SIZE_MAP: Record<ComponentSize, number> = {
 }
 
 export function useSpace(props: SpaceProps) {
-  const classes = computed(() => [
-    'el-space',
-    `el-space--${props.direction}`,
-    props.class,
-  ])
+  const ns = useNamespace('space')
+
+  const classes = computed(() => [ns.b(), ns.m(props.direction), props.class])
 
   const horizontalSize = ref(0)
   const verticalSize = ref(0)