fix(comp:carousel): dot clickable area is too small (#1590)

IDuxFE · Jul 4, 2023 · 7138b40 · 7138b40
1 parent 1e23dc3
commit 7138b40
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/packages/components/carousel/style/index.less b/packages/components/carousel/style/index.less
@@ -66,7 +66,6 @@
     }
   }
 
-
   &-vertical &-slider {
     height: auto;
   }
@@ -114,11 +113,24 @@
   }
 
   &-dot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     opacity: @carousel-icon-opacity;
     cursor: pointer;
-    line-height: @carousel-dot-vertical-width;
     font-size: 0; // 消除幽灵高度，避免影响间距计算
 
+    &::after {
+      position: absolute;
+      top: ~'calc(-1 * min(max(200%, 16px), 32px) / 2 + 100% / 2)';
+      left: 0;
+      display: block;
+      content: ' ';
+      width: 100%;
+      height: ~'min(max(200%, 16px), 32px)';
+    }
+
     &:hover,
     &-active {
       opacity: @carousel-icon-active-opacity;
@@ -152,6 +164,13 @@
       width: @carousel-dot-vertical-width;
       height: @carousel-dot-vertical-height;
     }
+
+    &::after {
+      top: 0;
+      left: ~'calc(-1 * min(max(200%, 16px), 32px) / 2 + 100% / 2)';
+      width: ~'min(max(200%, 16px), 32px)';
+      height: 100%;
+    }
   }
 
   &-horizontal &-dot + &-dot {