refactor(Popover): 优化代码

Signed-off-by: Tenny <joel.shu@qq.com>

Author: Tenny

docs/components/popover.md

@@ -83,140 +83,140 @@
   <CodePreview>
   <textarea lang="vue-html">
   <div class="popover-p-row">
-    <nt-popover content="提示内容" placement="topLeft">
+    <nt-popover content="提示内容" placement="topStart">
       <template #trigger>
-        <nt-button>topLeft</nt-button>
+        <nt-button>topStart</nt-button>
       </template>
     </nt-popover>
     <nt-popover content="提示内容" placement="top">
       <template #trigger>
         <nt-button>top</nt-button>
       </template>
     </nt-popover>
-    <nt-popover content="提示内容" placement="topRight">
+    <nt-popover content="提示内容" placement="topEnd">
       <template #trigger>
-        <nt-button>topRight</nt-button>
+        <nt-button>topEnd</nt-button>
       </template>
     </nt-popover>
   </div>
   <div class="popover-p-row">
-    <nt-popover content="提示内容" placement="leftTop">
+    <nt-popover content="提示内容" placement="leftStart">
       <template #trigger>
-        <nt-button>leftTop</nt-button>
+        <nt-button>leftStart</nt-button>
       </template>
     </nt-popover>
     <nt-popover content="提示内容" placement="left">
       <template #trigger>
         <nt-button>left</nt-button>
       </template>
     </nt-popover>
-    <nt-popover content="提示内容" placement="leftBottom">
+    <nt-popover content="提示内容" placement="leftEnd">
       <template #trigger>
-        <nt-button>leftBottom</nt-button>
+        <nt-button>leftEnd</nt-button>
       </template>
     </nt-popover>
   </div>
   <div class="popover-p-row">
-    <nt-popover content="提示内容" placement="rightTop">
+    <nt-popover content="提示内容" placement="rightStart">
       <template #trigger>
-        <nt-button>rightTop</nt-button>
+        <nt-button>rightStart</nt-button>
       </template>
     </nt-popover>
     <nt-popover content="提示内容" placement="right">
       <template #trigger>
         <nt-button>right</nt-button>
       </template>
     </nt-popover>
-    <nt-popover content="提示内容" placement="rightBottom">
+    <nt-popover content="提示内容" placement="rightEnd">
       <template #trigger>
-        <nt-button>rightBottom</nt-button>
+        <nt-button>rightEnd</nt-button>
       </template>
     </nt-popover>
   </div>
   <div class="popover-p-row">
-    <nt-popover content="提示内容" placement="bottomLeft">
+    <nt-popover content="提示内容" placement="bottomStart">
       <template #trigger>
-        <nt-button>bottomLeft</nt-button>
+        <nt-button>bottomStart</nt-button>
       </template>
     </nt-popover>
     <nt-popover content="提示内容" placement="bottom">
       <template #trigger>
         <nt-button>bottom</nt-button>
       </template>
     </nt-popover>
-    <nt-popover content="提示内容" placement="bottomRight">
+    <nt-popover content="提示内容" placement="bottomEnd">
       <template #trigger>
-        <nt-button>bottomRight</nt-button>
+        <nt-button>bottomEnd</nt-button>
       </template>
     </nt-popover>
   </div>
   </textarea>
   <template #preview>
     <div class="popover-p-row">
-      <Popover content="提示内容" placement="topLeft">
+      <Popover content="提示内容" placement="topStart">
         <template #trigger>
-          <Button>topLeft</Button>
+          <Button>topStart</Button>
         </template>
       </Popover>
       <Popover content="提示内容" placement="top">
         <template #trigger>
           <Button>top</Button>
         </template>
       </Popover>
-      <Popover content="提示内容" placement="topRight">
+      <Popover content="提示内容" placement="topEnd">
         <template #trigger>
-          <Button>topRight</Button>
+          <Button>topEnd</Button>
         </template>
       </Popover>
     </div>
     <div class="popover-p-row">
-      <Popover content="提示内容" placement="leftTop">
+      <Popover content="提示内容" placement="leftStart">
         <template #trigger>
-          <Button>leftTop</Button>
+          <Button>leftStart</Button>
         </template>
       </Popover>
       <Popover content="提示内容" placement="left">
         <template #trigger>
           <Button>left</Button>
         </template>
       </Popover>
-      <Popover content="提示内容" placement="leftBottom">
+      <Popover content="提示内容" placement="leftEnd">
         <template #trigger>
-          <Button>leftBottom</Button>
+          <Button>leftEnd</Button>
         </template>
       </Popover>
     </div>
     <div class="popover-p-row">
-      <Popover content="提示内容" placement="rightTop">
+      <Popover content="提示内容" placement="rightStart">
         <template #trigger>
-          <Button>rightTop</Button>
+          <Button>rightStart</Button>
         </template>
       </Popover>
       <Popover content="提示内容" placement="right">
         <template #trigger>
           <Button>right</Button>
         </template>
       </Popover>
-      <Popover content="提示内容" placement="rightBottom">
+      <Popover content="提示内容" placement="rightEnd">
         <template #trigger>
-          <Button>rightBottom</Button>
+          <Button>rightEnd</Button>
         </template>
       </Popover>
     </div>
     <div class="popover-p-row">
-      <Popover content="提示内容" placement="bottomLeft">
+      <Popover content="提示内容" placement="bottomStart">
         <template #trigger>
-          <Button>bottomLeft</Button>
+          <Button>bottomStart</Button>
         </template>
       </Popover>
       <Popover content="提示内容" placement="bottom">
         <template #trigger>
           <Button>bottom</Button>
         </template>
       </Popover>
-      <Popover content="提示内容" placement="bottomRight">
+      <Popover content="提示内容" placement="bottomEnd">
         <template #trigger>
-          <Button>bottomRight</Button>
+          <Button>bottomEnd</Button>
         </template>
       </Popover>
     </div>
@@ -261,7 +261,7 @@
 | --- | --- | --- | --- |
 | `trigger` | 触发方式 | `hover`、`click` | `hover` |
 | `content` | 显示内容, 也可以通过 `default-slot` 显示 | `string` | - |
-| `placement` | 弹出位置 | `topLeft`、`top`、`topRight`、`leftTop`、`left`、`leftBottom`、`rightTop`、`right`、`rightBottom`、`bottomLeft`、`bottom`、`bottomRight` | `top` |
+| `placement` | 弹出位置 | `topStart`、`top`、`topEnd`、`leftStart`、`left`、`leftEnd`、`rightStart`、`right`、`rightEnd`、`bottomStart`、`bottom`、`bottomEnd` | `top` |
 | `visible` | 受控模式显示与隐藏 | `boolean` | - |
 | `to` | 受控模式下起泡对标元素 | `HTMLElement`、`string`、`Ref<HTMLElement>` | - |
 

src/components/popover/Popover.vue

@@ -16,8 +16,13 @@ import { popoverProps } from './constant';
 import Clickoutside from '../../directives/clickoutside';
 import { round } from 'ph-utils';
 import { elem } from 'ph-utils/dom';
+import {
+  getPopoverOffsetX,
+  getPopoverOffsetY,
+  impactDetect,
+} from '../../utils';
 
-const XM_REG = /^(left)|(right)/;
+const POS_REG = /^(left|right|top|bottom)(Start|Center|End)?$/;
 
 function getFirstTriggerVNode(slots: any): VNode | null {
   if (slots.trigger != null) {
@@ -26,28 +31,6 @@ function getFirstTriggerVNode(slots: any): VNode | null {
   return null;
 }
 
-/** 获取某个节点距离容器顶部和左边的距离 */
-function getDistanceToContainer(el: HTMLElement) {
-  let offsetLeft = 0;
-  let offsetTop = 0;
-  let top = 0;
-  let bottom = 0;
-  let left = 0;
-  let right = 0;
-  while (el) {
-    const rect = el.getBoundingClientRect();
-    offsetTop += el.offsetTop;
-    offsetLeft += el.offsetLeft;
-    top = rect.top;
-    bottom = rect.bottom;
-    left = rect.left;
-    right = rect.right;
-    el = el.offsetParent as HTMLElement;
-  }
-
-  return { offsetLeft, offsetTop, top, bottom, left, right };
-}
-
 export default defineComponent({
   props: popoverProps,
   inheritAttrs: false,
@@ -99,120 +82,61 @@ export default defineComponent({
       show.value = true;
 
       nextTick(() => {
-        const { offsetLeft, offsetTop, top, left } =
-          getDistanceToContainer($target);
-        let topDiff = 0;
-        let leftDiff = 0;
-        let tmpPlace = props.placement;
+        // 获取水平和垂直方向的位置
+        let mainPos = 'bottom';
+        let crossPos = '';
+        const poss = props.placement.match(POS_REG);
+        if (poss != null) {
+          mainPos = poss[1];
+          crossPos = poss[2] || '';
+        }
+        let x = 0,
+          y = 0;
+        // 获取滚动容器
+        const container = document.documentElement;
+        // 滚动条水平方向滚动距离
+        const scrollLeft = container.scrollLeft;
+        // 滚动条垂直方向滚动距离
+        const scrollTop = container.scrollTop;
+
         if ($popover.value != null) {
           const popoverRect = $popover.value.getBoundingClientRect();
           const targetRect = $target.getBoundingClientRect();
-          if (props.placement.startsWith('top')) {
-            topDiff = popoverRect.height + 8;
-          } else if (props.placement.startsWith('bottom')) {
-            topDiff = -(targetRect.height + 8);
-          } else if (
-            props.placement === 'left' ||
-            props.placement === 'right'
-          ) {
-            topDiff = popoverRect.height / 2 - targetRect.height / 2;
-          } else if (
-            props.placement === 'leftBottom' ||
-            props.placement === 'rightBottom'
-          ) {
-            topDiff = popoverRect.height - targetRect.height;
-          }
-
-          if (props.placement.startsWith('left')) {
-            leftDiff = popoverRect.width + 8;
-          } else if (props.placement.startsWith('right')) {
-            leftDiff = -(targetRect.width + 8);
-          } else if (
-            props.placement === 'top' ||
-            props.placement === 'bottom'
-          ) {
-            leftDiff = popoverRect.width / 2 - targetRect.width / 2;
-          } else if (
-            props.placement === 'bottomRight' ||
-            props.placement === 'topRight'
-          ) {
-            leftDiff = popoverRect.width - targetRect.width;
-          }
-
-          const posLeft = offsetLeft - leftDiff;
-          let xPos = '';
-          let yPos = '';
-
-          if (
-            offsetTop - topDiff + popoverRect.height >=
-            Math.abs(top) + window.innerHeight - 15
-          ) {
-            if (props.placement.match(XM_REG)) {
-              yPos = 'bottom';
-              topDiff = popoverRect.height - targetRect.height;
-            } else {
-              yPos = 'top';
-              topDiff = popoverRect.height + 8;
-            }
-          }
-          if (offsetTop - topDiff <= Math.abs(top)) {
-            if (props.placement.match(XM_REG)) {
-              yPos = 'top';
-              topDiff = 0;
-            } else {
-              yPos = 'bottom';
-              topDiff = -(targetRect.height + 8);
-            }
-          }
-
-          if (posLeft <= Math.abs(left)) {
-            xPos = 'left';
-            leftDiff = 0;
-          }
-          if (
-            posLeft + popoverRect.width >=
-            Math.abs(left) + window.innerWidth - 15
-          ) {
-            xPos = 'left';
-            leftDiff = 0;
-          }
-
-          if (xPos === '' && yPos === '') {
-            tmpPlace = props.placement;
-          } else {
-            if (xPos === '') {
-              if (props.placement.match(/left/i)) {
-                xPos = 'left';
-              } else if (props.placement.match(/right/i)) {
-                xPos = 'right';
-              }
-            }
-            if (yPos === '') {
-              if (props.placement.match(/top/i)) {
-                yPos = 'top';
-              }
-              if (props.placement.match(/bottom/i)) {
-                yPos = 'bottom';
-              }
-            }
-            if (props.placement.match(/^(left)|(right)/)) {
-              const yName =
-                yPos === '' ? '' : yPos[0].toUpperCase() + yPos.substring(1);
-              tmpPlace = `${xPos}${yName}` as any;
-            } else if (props.placement.match(/^(top)|(bottom)/)) {
-              const xName =
-                xPos === '' ? '' : xPos[0].toUpperCase() + xPos.substring(1);
-              tmpPlace = `${yPos}${xName}` as any;
-            }
-          }
+          // 获取水平、垂直方向弹窗坐标点偏移
+          const yOffset = getPopoverOffsetY(
+            targetRect,
+            popoverRect,
+            mainPos,
+            crossPos,
+          );
+          const xOffset = getPopoverOffsetX(
+            targetRect,
+            popoverRect,
+            mainPos,
+            crossPos,
+          );
+          // 碰撞检测
+          const impactRes = impactDetect(
+            targetRect,
+            popoverRect,
+            mainPos,
+            crossPos,
+            scrollLeft,
+            scrollTop,
+            xOffset,
+            yOffset,
+          );
+          x = impactRes.x;
+          y = impactRes.y;
+          mainPos = impactRes.mainAlign;
+          crossPos = impactRes.crossAlign;
         }
-        const posTop = round(offsetTop - topDiff);
-        const posLeft = round(offsetLeft - leftDiff);
+
         posStyle.value = {
-          top: `${posTop}px`,
-          left: `${posLeft}px`,
+          top: `${round(y)}px`,
+          left: `${round(x)}px`,
         };
-        place.value = tmpPlace;
+        place.value = `${mainPos}${crossPos}` as any;
       });
     }