提交

1

src/components/layout/index.tsx

@@ -1,4 +1,12 @@
-import { Transition, defineComponent, onMounted, ref, reactive,onUnmounted,watch } from 'vue';
+import {
+  Transition,
+  defineComponent,
+  onMounted,
+  ref,
+  reactive,
+  onUnmounted,
+  watch
+} from 'vue';
 import LayoutSilder from './layoutSilder';
 import LayoutTop from './layoutTop';
 import styles from './index.module.less';
@@ -21,7 +29,7 @@ import { px2vw, px2vwH } from '@/utils/index';
 import PlaceholderTone from './modals/placeholderTone';
 import { state } from '/src/state';
 import PreviewWindow from '/src/views/preview-window';
-import {fscreen} from '@/utils/index'
+import { fscreen } from '@/utils/index';
 export default defineComponent({
   name: 'layoutView',
   setup() {
@@ -36,8 +44,8 @@ export default defineComponent({
     const showBoxConent = ref(false);
     const dialog = useDialog();
     const boxBoundaryInfo = reactive({
-      isBoundary: true,
-      isBoundaryType: 'right' as any,
+      isBoundary: false,
+      isBoundaryType: '' as any,
       mainWidth: '' as any,
       mainHeight: '' as any,
       subWidth: '' as any,
@@ -54,7 +62,7 @@ export default defineComponent({
     });
     const route = useRoute();
     const isDragIng = ref(false);
-    const NPopoverRef = ref()
+    const NPopoverRef = ref();
     const initMoveable = async () => {
       if (document.querySelector('.wrap')) {
         const moveable = new Moveable(document.querySelector('.wrap') as any, {
@@ -99,8 +107,8 @@ export default defineComponent({
               // clientY
             }) => {
               isDragIng.value = true;
-              if(NPopoverRef.value){
-                NPopoverRef.value.setShow(false)
+              if (NPopoverRef.value) {
+                NPopoverRef.value.setShow(false);
               }
 
               const subdEl = document.getElementById(
@@ -322,13 +330,16 @@ export default defineComponent({
       }
     };
 
-    watch(()=>route.path,(val:any)=>{
-      const elDoc = document.getElementById('WrapcoreViewWrap') as any
-      if(elDoc){
-        elDoc.scrollTo(0, 0)
-        window.scrollTo(0, 0)
+    watch(
+      () => route.path,
+      (val: any) => {
+        const elDoc = document.getElementById('WrapcoreViewWrap') as any;
+        if (elDoc) {
+          elDoc.scrollTo(0, 0);
+          window.scrollTo(0, 0);
+        }
       }
-    })
+    );
     onMounted(() => {
       initMoveable();
       // // initMoveableClass();
@@ -336,16 +347,17 @@ export default defineComponent({
       // // const classEl = document.getElementById(
       // //   `moveNPopover2`
       // // ) as HTMLDivElement;
-      initBoxRectInfo(subdEl, boxBoundaryInfo);
+
       // // initBoxRectInfo(classEl, classBoundaryInfo);
       initBoundaryWrap(subdEl, boxBoundaryInfo);
+      initBoxRectInfo(subdEl, boxBoundaryInfo);
       // // initBoundaryWrap(classEl, classBoundaryInfo);
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
     });
 
-    const resetSize = ()=>{
+    const resetSize = () => {
       const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
-      subdEl.style.display = 'none'
+      subdEl.style.display = 'none';
       // const boxBoundaryInfo = reactive({
       //   isBoundary: true,
       //   isBoundaryType: 'right' as any,
@@ -355,32 +367,25 @@ export default defineComponent({
       //   subHeight: '' as any
       // });
 
+      // boxBoundaryInfo.isBoundary = true;
+      // boxBoundaryInfo.isBoundaryType= 'right'
+      if (NPopoverRef.value) {
+        NPopoverRef.value.setShow(false);
+      }
 
-        // boxBoundaryInfo.isBoundary = true;
-        // boxBoundaryInfo.isBoundaryType= 'right'
-        if(NPopoverRef.value){
-          NPopoverRef.value.setShow(false)
-        }
-
-        setTimeout(()=>{
-
-          subdEl.style.transition = ''
-          initBoxRectInfo(subdEl, boxBoundaryInfo);
-          initBoundaryWrap(subdEl, boxBoundaryInfo);
-          console.log('resize')
-          subdEl.style.display = 'block'
-        },100)
-
-
-
-
-
-    }
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+      setTimeout(() => {
+        subdEl.style.transition = '';
+        initBoxRectInfo(subdEl, boxBoundaryInfo);
+        initBoundaryWrap(subdEl, boxBoundaryInfo);
+        console.log('resize');
+        subdEl.style.display = 'block';
+      }, 100);
+    };
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+    });
     const initBoundaryWrap = (target: any, wrapInfo: any) => {
-      target.addEventListener('mouseenter', () => {
+      target.addEventListener('mouseover', () => {
         if (wrapInfo.isBoundary) {
           // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
           if (wrapInfo.isBoundaryType == 'left') {
@@ -394,8 +399,9 @@ export default defineComponent({
           }
         }
         rate(target, 0);
+
       });
-      target.addEventListener('mouseleave', () => {
+      target.addEventListener('mouseout', () => {
         if (wrapInfo.isBoundary) {
           // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
           if (wrapInfo.isBoundaryType == 'left') {
@@ -418,16 +424,15 @@ export default defineComponent({
           positiveText: '确定',
           negativeText: '取消',
           onPositiveClick: () => {
-            console.log('确定')
+            console.log('确定');
           },
           onNegativeClick: () => {
-            console.log('取消')
+            console.log('取消');
           }
-        })
-
+        });
       });
 
-      actionEnd(target, 'right');
+      // actionEnd(target, 'right');
     };
     const startShowModal = (val: 'setTimeIcon' | 'beatIcon' | 'toneIcon') => {
       if (val == 'setTimeIcon') {
@@ -450,7 +455,6 @@ export default defineComponent({
 
     //  这里是选装的方式
     const actionEnd = (target: any, type: any) => {
-
       switch (type) {
         case 'left':
           rate(target, '90deg');
@@ -508,7 +512,7 @@ export default defineComponent({
       wrapInfo.mainWidth = mainWidth;
       wrapInfo.subWidth = RectInfo.width;
       wrapInfo.subHeight = RectInfo.height;
-      target.style.transition = '.3s';
+      target.style.transition = '.3s .3s';
     };
     return () => (
       <div class={[styles.wrap, 'wrap']}>
@@ -517,7 +521,7 @@ export default defineComponent({
         </div>
         <div class={styles.Wrapcore}>
           <LayoutTop></LayoutTop>
-          <div class={styles.WrapcoreView} id='WrapcoreViewWrap'>
+          <div class={styles.WrapcoreView} id="WrapcoreViewWrap">
             {/* <div class={styles.WrapcoreViewInfo}> */}
             <router-view>
               {(obj: any) => (
@@ -592,21 +596,23 @@ export default defineComponent({
               <img src={setTimeIcon} alt="" />
               计时器
             </div>
-            <div   class={styles.booxToolItem} onClick={()=>{
-              showClass.value = true
-            }}  style={{
-                  display: [
-                    '/',
-                    '/home',
-                    '/classList',
-                    '/prepare-lessons'
-                  ].includes(route.path)
-                    ? 'none'
-                    : 'block'
-                }}>
+            <div
+              class={styles.booxToolItem}
+              onClick={() => {
+                showClass.value = true;
+              }}
+              style={{
+                display: [
+                  '/',
+                  '/home',
+                  '/classList',
+                  '/prepare-lessons'
+                ].includes(route.path)
+                  ? 'none'
+                  : 'block'
+              }}>
               <img
                 src={toolStartClass}
-
                 style={{
                   display: [
                     '/',
@@ -617,9 +623,7 @@ export default defineComponent({
                     ? 'none'
                     : 'block'
                 }}
-                class={[
-                  styles.toolClassImg,
-                ]}
+                class={[styles.toolClassImg]}
                 alt=""
               />
               开始上课
@@ -683,8 +687,10 @@ export default defineComponent({
                 previewItem.value = {
                   ...item
                 };
-                state.application = window.matchMedia('(display-mode: standalone)').matches
-                fscreen()
+                state.application = window.matchMedia(
+                  '(display-mode: standalone)'
+                ).matches;
+                fscreen();
               } else {
                 const { href } = router.resolve({
                   path: '/attend-class',