更新

src/hooks/useDrag/dragbom.jsx

@@ -12,12 +12,23 @@ export default defineComponent({
     const initGuidePos = () => {
       const pageHeight =
         document.documentElement.clientHeight || document.body.clientHeight;
+      const pageWidth =
+        document.documentElement.clientWidth || document.body.clientWidth;
       const guideHeight =
-        document.querySelector('.bom_guide')?.getBoundingClientRect().height ||
-        0;
-      const dragTop =
-        document.querySelector('.bom_drag')?.getBoundingClientRect()?.top || 0;
-      data.guidePos = pageHeight - dragTop < guideHeight ? 'top' : 'bottom';
+        document.querySelector('.bom_guide')?.clientHeight || 0;
+      const guideWidth = document.querySelector('.bom_guide')?.clientWidth || 0;
+      const dragBBox = document
+        .querySelector('.bom_drag')
+        ?.getBoundingClientRect();
+      const dragTop = dragBBox?.top || 0;
+      const dragLeft = dragBBox?.left || 0;
+      // 引导页出现在下边
+      if (pageHeight - dragTop > guideHeight) {
+        data.guidePos = 'bottom';
+      } else {
+        // 引导页出现在左边or右边
+        data.guidePos = dragLeft > guideWidth ? 'left' : 'right';
+      }
     };
     onMounted(() => {
       if (guidanceShow.value) {
@@ -39,7 +50,8 @@ export default defineComponent({
             onClick={setGuidanceShow}
             class={[
               styles.guide,
-              data.guidePos === 'top' && styles.guideTop,
+              data.guidePos === 'left' && styles.guideLeft,
+              data.guidePos === 'right' && styles.guideRight,
               !guidanceShowDela.value && styles.hideGuide,
               'bom_guide'
             ]}>

src/hooks/useDrag/index.module.less

@@ -24,11 +24,11 @@
     content: '';
     display: block;
     position: fixed;
-    left: 0;
-    top: 0;
+    left: -100vw;
+    top: -100vh;
     z-index: 3000;
-    width: 100vw;
-    height: 100vh;
+    width: 200vw;
+    height: 200vh;
     background: rgba(0, 0, 0, 0.2);
   }
   &.hideGuide {
@@ -61,4 +61,22 @@
       background-size: 100% 100%;
     }
   }
+  &.guideLeft {
+    top: initial;
+    left: -476px;
+    bottom: -8px;
+    .guideBg {
+      background: url('./img/modalDragBgLeft.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  &.guideRight {
+    top: initial;
+    left: calc(100% - 12px);
+    bottom: -8px;
+    .guideBg {
+      background: url('./img/modalDragBgRight.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }