refactor(components): [carousel] use var to replace raw string (#17958)

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'),

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'

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'
     )
   }

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) {