From 34effd4e7e9027f1ce7972b936b09301abf4f960 Mon Sep 17 00:00:00 2001
From: wzc520pyfm <69044080+wzc520pyfm@users.noreply.github.com>
Date: Tue, 26 Dec 2023 19:36:35 +0800
Subject: [PATCH] refactor(components): [carousel] class optimization in code
 (#14954)

refactor(components): [carousel] class optimization in code
---
 .../components/carousel/src/carousel-item.vue | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/components/carousel/src/carousel-item.vue b/packages/components/carousel/src/carousel-item.vue
index eb3a439e20..5d2561b628 100644
--- a/packages/components/carousel/src/carousel-item.vue
+++ b/packages/components/carousel/src/carousel-item.vue
@@ -2,17 +2,7 @@
   <div
     v-show="ready"
     ref="carouselItemRef"
-    :class="[
-      ns.e('item'),
-      ns.is('active', active),
-      ns.is('in-stage', inStage),
-      ns.is('hover', hover),
-      ns.is('animating', animating),
-      {
-        [ns.em('item', 'card')]: isCardType,
-        [ns.em('item', 'card-vertical')]: isCardType && isVertical,
-      },
-    ]"
+    :class="itemKls"
     :style="itemStyle"
     @click="handleItemClick"
   >
@@ -51,6 +41,18 @@ const {
   handleItemClick,
 } = useCarouselItem(props, COMPONENT_NAME)
 
+const itemKls = computed(() => [
+  ns.e('item'),
+  ns.is('active', active.value),
+  ns.is('in-stage', inStage.value),
+  ns.is('hover', hover.value),
+  ns.is('animating', animating.value),
+  {
+    [ns.em('item', 'card')]: isCardType.value,
+    [ns.em('item', 'card-vertical')]: isCardType.value && isVertical.value,
+  },
+])
+
 const itemStyle = computed<CSSProperties>(() => {
   const translateType = `translate${unref(isVertical) ? 'Y' : 'X'}`
   const _translate = `${translateType}(${unref(translate)}px)`