fix: carousel not working when using v-show (#2361)

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

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

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,