fix(comp:carousel): after click the same dot repeatedly, will not work (

#986)
IDuxFE · Jun 28, 2022 · 33e136e · 33e136e
1 parent a263497
commit 33e136e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 40 deletions.
diff --git a/packages/components/carousel/src/Carousel.tsx b/packages/components/carousel/src/Carousel.tsx
@@ -46,7 +46,9 @@ export default defineComponent({
       }
     }
 
-    onBeforeUpdate(() => (sliderRefs.value = []))
+    onBeforeUpdate(() => {
+      sliderRefs.value = []
+    })
 
     const { activeIndex, runningIndex, unitHeight, unitWidth, goTo, next, prev } = useStrategy(
       props,
@@ -119,7 +121,8 @@ export default defineComponent({
     }
 
     const onTransitionend = () => {
-      if (runningIndex.value === -1) {
+      const currRunningIndex = runningIndex.value
+      if (currRunningIndex === -1) {
         return
       }
       const sliderTrackElement = sliderTrackRef.value!
@@ -131,13 +134,13 @@ export default defineComponent({
           element.style.left = ''
         }
       })
-      const currIndex = runningIndex.value
+
       if (mergedVertical.value) {
-        sliderTrackElement.style.transform = `translate3d(0, ${-currIndex * unitHeight.value}px, 0)`
+        sliderTrackElement.style.transform = `translate3d(0, ${-currRunningIndex * unitHeight.value}px, 0)`
       } else {
-        sliderTrackElement.style.transform = `translate3d(${-currIndex * unitWidth.value}px,0 , 0)`
+        sliderTrackElement.style.transform = `translate3d(${-currRunningIndex * unitWidth.value}px,0 , 0)`
       }
-      activeIndex.value = currIndex
+      activeIndex.value = currRunningIndex
       runningIndex.value = -1
       startAutoplay()
     }

diff --git a/packages/components/carousel/src/composables/useStrategy.ts b/packages/components/carousel/src/composables/useStrategy.ts
@@ -64,54 +64,64 @@ export function useStrategy(
   //             this will not track dependencies used in the slot.
   //             Invoke the slot function inside the render function instead.
   onMounted(() => {
-    watch(mergedLength, () => {
-      goTo(0)
-      layout()
-    })
+    watch(
+      mergedLength,
+      () => {
+        layout()
+        runningIndex.value = -1
+        goTo(0)
+      },
+      { flush: 'post' },
+    )
   })
 
   const goTo = (nextIndex: number) => {
     const length = mergedLength.value
     const sliderTrackElement = sliderTrackRef.value
     const firstSliderElement = convertElement(sliderRefs.value[0])
     const lastSliderElement = convertElement(sliderRefs.value[length - 1])
-    if (!sliderTrackElement || !firstSliderElement || !lastSliderElement) {
+
+    if (
+      length <= 1 ||
+      runningIndex.value !== -1 ||
+      nextIndex === activeIndex.value ||
+      !sliderTrackElement ||
+      !firstSliderElement ||
+      !lastSliderElement
+    ) {
       return
     }
 
-    if (length > 1 && runningIndex.value === -1) {
-      const currIndex = activeIndex.value
-      const { from, to } = getBoundary(currIndex, nextIndex, length)
-      runningIndex.value = to
-      sliderTrackElement.style.transition = `transform 0.5s ease`
-
-      const needToAdjust = length > 2 && nextIndex !== to
-      if (mergedVertical.value) {
-        if (needToAdjust) {
-          if (to < from) {
-            firstSliderElement.style.top = `${length * unitHeight.value}px`
-            lastSliderElement.style.top = ''
-          } else {
-            firstSliderElement.style.top = ''
-            lastSliderElement.style.top = `${-length * unitHeight.value}px`
-          }
-          sliderTrackElement.style.transform = `translate3d(0, ${-nextIndex * unitHeight.value}px, 0)`
+    const { from, to } = getBoundary(activeIndex.value, nextIndex, length)
+    runningIndex.value = to
+    sliderTrackElement.style.transition = `transform 0.5s ease`
+
+    const needToAdjust = length > 2 && nextIndex !== to
+    if (mergedVertical.value) {
+      if (needToAdjust) {
+        if (to < from) {
+          firstSliderElement.style.top = `${length * unitHeight.value}px`
+          lastSliderElement.style.top = ''
         } else {
-          sliderTrackElement.style.transform = `translate3d(0, ${-to * unitHeight.value}px, 0)`
+          firstSliderElement.style.top = ''
+          lastSliderElement.style.top = `${-length * unitHeight.value}px`
         }
+        sliderTrackElement.style.transform = `translate3d(0, ${-nextIndex * unitHeight.value}px, 0)`
       } else {
-        if (needToAdjust) {
-          if (to < from) {
-            firstSliderElement.style.left = `${length * unitWidth.value}px`
-            lastSliderElement.style.left = ''
-          } else {
-            firstSliderElement.style.left = ''
-            lastSliderElement.style.left = `${-length * unitWidth.value}px`
-          }
-          sliderTrackElement.style.transform = `translate3d(${-nextIndex * unitWidth.value}px, 0, 0)`
+        sliderTrackElement.style.transform = `translate3d(0, ${-to * unitHeight.value}px, 0)`
+      }
+    } else {
+      if (needToAdjust) {
+        if (to < from) {
+          firstSliderElement.style.left = `${length * unitWidth.value}px`
+          lastSliderElement.style.left = ''
         } else {
-          sliderTrackElement.style.transform = `translate3d(${-to * unitWidth.value}px, 0, 0)`
+          firstSliderElement.style.left = ''
+          lastSliderElement.style.left = `${-length * unitWidth.value}px`
         }
+        sliderTrackElement.style.transform = `translate3d(${-nextIndex * unitWidth.value}px, 0, 0)`
+      } else {
+        sliderTrackElement.style.transform = `translate3d(${-to * unitWidth.value}px, 0, 0)`
       }
     }
   }

diff --git a/packages/components/pagination/style/index.less b/packages/components/pagination/style/index.less
@@ -16,11 +16,12 @@
 
   &-sizes {
     display: inline-flex;
-    min-width: 104px;
+
 
     &-select-wrapper {
       flex: auto;
       margin: 0 4px;
+      min-width: 64px;
     }
   }