From 1347ee6360cbac97e72be611e314376eff01a643 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Mon, 28 Jun 2021 18:41:12 +0800
Subject: [PATCH] fix: carousel not working when using v-show (#2361)

---
 packages/carousel/src/carousel.ts | 3 +--
 packages/carousel/src/item.vue    | 5 ++---
 packages/carousel/src/main.vue    | 9 +--------
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/carousel/src/carousel.ts b/packages/carousel/src/carousel.ts
index 8f1f653077..906366cdc0 100644
--- a/packages/carousel/src/carousel.ts
+++ b/packages/carousel/src/carousel.ts
@@ -39,9 +39,8 @@ export interface CarouselItem extends UnionCarouselItemData {
 }
 
 export interface InjectCarouselScope {
+  root: Ref<HTMLElement>
   direction: string
-  offsetWidth: Ref<number>
-  offsetHeight: Ref<number>
   type: string
   items: Ref<UnwrapRef<CarouselItem[]>>
   loop: boolean
diff --git a/packages/carousel/src/item.vue b/packages/carousel/src/item.vue
index 0f9b27d555..5106a5d9c3 100644
--- a/packages/carousel/src/item.vue
+++ b/packages/carousel/src/item.vue
@@ -99,7 +99,7 @@ export default defineComponent({
     }
 
     function calcCardTranslate(index, activeIndex) {
-      const parentWidth = injectCarouselScope.offsetWidth.value
+      const parentWidth = injectCarouselScope.root.value?.offsetWidth || 0
       if (data.inStage) {
         return (
           (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4
@@ -112,8 +112,7 @@ export default defineComponent({
     }
 
     function calcTranslate(index, activeIndex, isVertical) {
-      const distance =
-        injectCarouselScope[isVertical ? 'offsetHeight' : 'offsetWidth'].value
+      const distance = (isVertical ? injectCarouselScope.root.value?.offsetHeight : injectCarouselScope.root.value?.offsetWidth) || 0
       return distance * (index - activeIndex)
     }
 
diff --git a/packages/carousel/src/main.vue b/packages/carousel/src/main.vue
index fe90897bfc..c482d77ee7 100644
--- a/packages/carousel/src/main.vue
+++ b/packages/carousel/src/main.vue
@@ -141,8 +141,6 @@ export default defineComponent({
     // refs
     const root = ref(null)
     const items = ref<CarouselItem[]>([])
-    const offsetWidth = ref(0)
-    const offsetHeight = ref(0)
 
     // computed
     const arrowDisplay = computed(
@@ -345,10 +343,6 @@ export default defineComponent({
     onMounted(() => {
       nextTick(() => {
         addResizeListener(root.value, resetItemPosition)
-        if (root.value) {
-          offsetWidth.value = root.value.offsetWidth
-          offsetHeight.value = root.value.offsetHeight
-        }
         if (
           props.initialIndex < items.value.length &&
           props.initialIndex >= 0
@@ -366,9 +360,8 @@ export default defineComponent({
 
     // provide
     provide<InjectCarouselScope>('injectCarouselScope', {
+      root,
       direction: props.direction,
-      offsetWidth,
-      offsetHeight,
       type: props.type,
       items,
       loop: props.loop,