feat: [popper]修复箭头颜色覆盖问题 fix #1032

kingdee · Jan 3, 2025 · 348ffbc · 348ffbc
1 parent cd2b492
commit 348ffbc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/components/popper/index.tsx b/components/popper/index.tsx
@@ -61,6 +61,7 @@ export type PopperProps = {
   mouseLeaveDelay?: number
   defaultVisible?: boolean
   autoPlacement?: boolean
+  backgroundTransparent?: boolean
   autoPlacementList?: Placement[]
   className?: string
   style?: React.CSSProperties
@@ -196,6 +197,7 @@ export const Popper = forwardRef<SubPopup | null, PopperProps>((props, ref) => {
     mouseLeaveDelay = 0.1,
     defaultVisible = false,
     autoPlacement = true,
+    backgroundTransparent = false,
     autoPlacementList,
     clickToClose = true,
     getTriggerElement = (locatorNode) => locatorNode,
@@ -668,7 +670,9 @@ export const Popper = forwardRef<SubPopup | null, PopperProps>((props, ref) => {
             <div {...popperContainerProps}>
               <div {...popperProps}>
                 {popperElement}
-                {arrow && <div className="arrow" data-popper-arrow="" />}
+                {arrow && (
+                  <div className={classnames('arrow', { transparent: backgroundTransparent })} data-popper-arrow="" />
+                )}
               </div>
             </div>
           </TriggerContext.Provider>,

diff --git a/components/popper/style/index.less b/components/popper/style/index.less
@@ -21,15 +21,18 @@
       visibility: visible;
       position: absolute;
       border-style: solid;
-      border-color: transparent;
       border-width: var(--arrowSize);
       content: '';
       transform: rotate(45deg);
     }
   }
 
   &[data-popper-placement^='top'] .arrow {
-    bottom: calc(1.05 * var(--arrowSize));
+    bottom: calc(1.07 * var(--arrowSize));
+
+    &.transparent {
+      bottom: calc(0.96 * var(--arrowSize));
+    }
 
     &::before {
       left: calc(-1 * var(--arrowSize));
@@ -39,7 +42,11 @@
   }
 
   &[data-popper-placement^='bottom'] .arrow {
-    top: calc(-0.85 * var(--arrowSize));
+    top: calc(-0.75 * var(--arrowSize));
+
+    &.transparent {
+      top: calc(-0.85 * var(--arrowSize));
+    }
 
     &::before {
       left: calc(-1 * var(--arrowSize));
@@ -49,7 +56,11 @@
   }
 
   &[data-popper-placement^='left'] .arrow {
-    right: calc(1.05 * var(--arrowSize));
+    right: calc(1.07 * var(--arrowSize));
+
+    &.transparent {
+      right: calc(0.9 * var(--arrowSize));
+    }
 
     &::before {
       top: calc(-1 * var(--arrowSize));
@@ -59,7 +70,11 @@
   }
 
   &[data-popper-placement^='right'] .arrow {
-    left: calc(-0.85 * var(--arrowSize));
+    left: calc(-0.75 * var(--arrowSize));
+
+    &.transparent {
+      left: calc(-0.85 * var(--arrowSize));
+    }
 
     &::before {
       top: calc(-1 * var(--arrowSize));