更新

src/hooks/useDrag/dragbom.tsx

@@ -3,27 +3,44 @@ import styles from './index.module.less';
 // 底部拖动区域
 export default defineComponent({
   name: 'dragBom',
-  emits: ["guideDone"],
-	props: {
-		/** 是否显示引导 */
-		showGuide: {
-			type: Boolean,
-			default: false,
-		},
-	},
+  emits: ['guideDone'],
+  props: {
+    /** 是否显示引导 */
+    showGuide: {
+      type: Boolean,
+      default: false
+    }
+  },
   setup(props, { emit }) {
     const data = reactive({
-      guidePos: "bottom" as "bottom" | "top",
+      guidePos: 'bottom' as 'bottom' | 'left' | 'right'
     });
 
     const initGuidePos = () => {
-      const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
-      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";
-    }
+      const pageHeight =
+        document.documentElement.clientHeight || document.body.clientHeight;
+      const pageWidth =
+        document.documentElement.clientWidth || document.body.clientWidth;
+      const guideHeight =
+        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(() => {
-      initGuidePos();
+      setTimeout(() => {
+        initGuidePos();
+      }, 0);
     });
     return () => (
       <>
@@ -31,14 +48,24 @@ export default defineComponent({
           <div class={styles.box}></div>
           <div class={[styles.box, styles.right]}></div>
         </div>
-        {
-          props.showGuide &&
-          <div class={[styles.guide, data.guidePos === "top" && styles.guideTop, 'bom_guide']} onClick={() => emit("guideDone")}>
+        {props.showGuide && (
+          <div
+            class={[
+              styles.guide,
+              data.guidePos === 'left' && styles.guideLeft,
+              data.guidePos === 'right' && styles.guideRight,
+              'bom_guide'
+            ]}
+            onClick={() => emit('guideDone')}>
             <div class={styles.guideBg}></div>
-            <div class={styles.guideDone} onClick={(e) => {e.stopPropagation();emit("guideDone")}}></div>
+            <div
+              class={styles.guideDone}
+              onClick={e => {
+                e.stopPropagation();
+                emit('guideDone');
+              }}></div>
           </div>
-        }
-
+        )}
       </>
     );
   }

src/hooks/useDrag/index.module.less

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