From c657bbe28bb5bd1f152eb5e7def7e9b065ddc5e2 Mon Sep 17 00:00:00 2001
From: blesstosam <blesstosam@126.com>
Date: Thu, 22 Aug 2024 15:07:30 +0800
Subject: [PATCH] refactor(components): [carousel] use var to replace raw
 string (#17958)

---
 packages/components/carousel/src/carousel-item.vue    |  7 ++++---
 packages/components/carousel/src/constants.ts         |  2 ++
 packages/components/carousel/src/use-carousel-item.ts | 11 ++++-------
 packages/components/carousel/src/use-carousel.ts      |  8 +++-----
 4 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/components/carousel/src/carousel-item.vue b/packages/components/carousel/src/carousel-item.vue
index 5d2561b628..869a23baa8 100644
--- a/packages/components/carousel/src/carousel-item.vue
+++ b/packages/components/carousel/src/carousel-item.vue
@@ -16,16 +16,17 @@ import { computed, unref } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { carouselItemProps } from './carousel-item'
 import { useCarouselItem } from './use-carousel-item'
+import { CAROUSEL_ITEM_NAME } from './constants'
 
 import type { CSSProperties } from 'vue'
 
 defineOptions({
-  name: 'ElCarouselItem',
+  name: CAROUSEL_ITEM_NAME,
 })
 
 const props = defineProps(carouselItemProps)
 const ns = useNamespace('carousel')
-const COMPONENT_NAME = 'ElCarouselItem'
+
 // inject
 const {
   carouselItemRef,
@@ -39,7 +40,7 @@ const {
   scale,
   ready,
   handleItemClick,
-} = useCarouselItem(props, COMPONENT_NAME)
+} = useCarouselItem(props)
 
 const itemKls = computed(() => [
   ns.e('item'),
diff --git a/packages/components/carousel/src/constants.ts b/packages/components/carousel/src/constants.ts
index 3d93a46180..a6f52662c9 100644
--- a/packages/components/carousel/src/constants.ts
+++ b/packages/components/carousel/src/constants.ts
@@ -34,3 +34,5 @@ export type CarouselContext = {
 
 export const carouselContextKey: InjectionKey<CarouselContext> =
   Symbol('carouselContextKey')
+
+export const CAROUSEL_ITEM_NAME = 'ElCarouselItem'
diff --git a/packages/components/carousel/src/use-carousel-item.ts b/packages/components/carousel/src/use-carousel-item.ts
index c3aa87963f..a4a7591876 100644
--- a/packages/components/carousel/src/use-carousel-item.ts
+++ b/packages/components/carousel/src/use-carousel-item.ts
@@ -8,27 +8,24 @@ import {
   unref,
 } from 'vue'
 import { debugWarn, isUndefined } from '@element-plus/utils'
-import { carouselContextKey } from './constants'
+import { CAROUSEL_ITEM_NAME, carouselContextKey } from './constants'
 
 import type { CarouselItemProps } from './carousel-item'
 
-export const useCarouselItem = (
-  props: CarouselItemProps,
-  componentName: string
-) => {
+export const useCarouselItem = (props: CarouselItemProps) => {
   const carouselContext = inject(carouselContextKey)!
   // instance
   const instance = getCurrentInstance()!
   if (!carouselContext) {
     debugWarn(
-      componentName,
+      CAROUSEL_ITEM_NAME,
       'usage: <el-carousel></el-carousel-item></el-carousel>'
     )
   }
 
   if (!instance) {
     debugWarn(
-      componentName,
+      CAROUSEL_ITEM_NAME,
       'compositional hook can only be invoked inside setups'
     )
   }
diff --git a/packages/components/carousel/src/use-carousel.ts b/packages/components/carousel/src/use-carousel.ts
index 8212c1fbb1..e98b2bfc1e 100644
--- a/packages/components/carousel/src/use-carousel.ts
+++ b/packages/components/carousel/src/use-carousel.ts
@@ -15,7 +15,7 @@ import { throttle } from 'lodash-unified'
 import { useResizeObserver } from '@vueuse/core'
 import { debugWarn, flattedChildren, isString } from '@element-plus/utils'
 import { useOrderedChildren } from '@element-plus/hooks'
-import { carouselContextKey } from './constants'
+import { CAROUSEL_ITEM_NAME, carouselContextKey } from './constants'
 
 import type { SetupContext } from 'vue'
 import type { CarouselItemContext } from './constants'
@@ -34,7 +34,7 @@ export const useCarousel = (
     removeChild: removeItem,
   } = useOrderedChildren<CarouselItemContext>(
     getCurrentInstance()!,
-    'ElCarouselItem'
+    CAROUSEL_ITEM_NAME
   )
 
   const slots = useSlots()
@@ -253,10 +253,8 @@ export const useCarousel = (
 
     const flatSlots = flattedChildren(defaultSlots)
 
-    const carouselItemsName = 'ElCarouselItem'
-
     const normalizeSlots = flatSlots.filter((slot) => {
-      return isVNode(slot) && (slot.type as any).name === carouselItemsName
+      return isVNode(slot) && (slot.type as any).name === CAROUSEL_ITEM_NAME
     })
 
     if (normalizeSlots?.length === 2 && props.loop && !isCardType.value) {