feat: 老师端拖动引导弹窗

src/view/plugins/useDrag/dragbom.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, computed, reactive, onMounted } from 'vue';
+import { defineComponent, computed, reactive, onMounted, nextTick } from 'vue';
 import styles from './index.module.less';
 // 底部拖动区域
 export default defineComponent({
@@ -13,17 +13,31 @@ export default defineComponent({
 	},
   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 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();
+      nextTick(() => {
+        setTimeout(() => {
+          initGuidePos();
+        }, 0);
+      });
     });
     return () => (
       <>
@@ -33,7 +47,7 @@ export default defineComponent({
         </div>
         {
           props.showGuide && 
-          <div class={[styles.guide, data.guidePos === "top" && styles.guideTop, 'bom_guide']} onClick={() => emit("guideDone")}>
+          <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}></div>
           </div>          

src/view/plugins/useDrag/index.module.less

@@ -64,4 +64,22 @@
       background-size: 100% 100%;
     }
   }
+  &.guideLeft {
+    top: initial;
+    left: -60%;
+    bottom: -10px;
+    .guideBg {
+      background: url('./img/modalDragBgLeft.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  &.guideRight {
+    top: initial;
+    left: calc(100% - 12px);
+    bottom: -10px;
+    .guideBg {
+      background: url('./img/modalDragBgRight.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }

src/view/plugins/useDrag/index.ts

@@ -69,9 +69,15 @@ export default function useDrag(
     // 有缓存 用缓存的值，没有缓存用默认
     if (posCache) {
       pos.value = posCache;
+      nextTick(() => {
+        refreshPos();
+      });
     }
   }
   function refreshPos() {
+    if (pos.value.left === -1 && pos.value.top === -1) {
+      return;
+    }
     const boxClassDom = document.querySelector(`.${boxClass}`) as HTMLElement;
     if (!boxClassDom) return;
     const parentElementRect = boxClassDom.getBoundingClientRect();