1

提交

src/views/attend-class/index.tsx

@@ -102,6 +102,15 @@ export default defineComponent({
       // setContainer();
     };
     handleInit();
+    const boxBoundaryInfo = reactive({
+      isBoundary: true,
+      isBoundaryType: 'right' as any,
+      mainWidth: '' as any,
+      mainHeight: '' as any,
+      subWidth: '' as any,
+      subHeight: '' as any
+    });
+
     onUnmounted(() => {
       handleInit(1);
     });
@@ -245,7 +254,7 @@ export default defineComponent({
                 width: Number(subdElStyle.width.replace('px', '')),
                 height: Number(subdElStyle.height.replace('px', ''))
               };
-
+              // target.style.transition = ''
               const mainWidth =
                 parseInt(
                   window.getComputedStyle(
@@ -259,12 +268,22 @@ export default defineComponent({
                     document.querySelector('.wrap') as Element
                   ).height
                 ) - RectInfo.height;
-
+              subdEl.style.transition = '';
+              boxBoundaryInfo.isBoundary = false;
+              boxBoundaryInfo.isBoundaryType = '';
+              boxBoundaryInfo.mainHeight = mainHeight;
+              boxBoundaryInfo.mainWidth = mainWidth;
+              boxBoundaryInfo.subWidth = RectInfo.width;
+              boxBoundaryInfo.subHeight = RectInfo.height;
               if (left < 0) {
                 left = 2;
+                boxBoundaryInfo.isBoundary = true;
+                boxBoundaryInfo.isBoundaryType = 'left';
               }
               if (top < 0) {
                 top = 2;
+                boxBoundaryInfo.isBoundary = true;
+                boxBoundaryInfo.isBoundaryType = 'top';
               }
               if (right < 0) {
                 right = 2;
@@ -274,9 +293,14 @@ export default defineComponent({
               }
               if (left > mainWidth - 2) {
                 left = mainWidth - 2;
+                // top = 2;
+                boxBoundaryInfo.isBoundary = true;
+                boxBoundaryInfo.isBoundaryType = 'right';
               }
               if (top > mainHeight - 2) {
                 top = mainHeight - 2;
+                boxBoundaryInfo.isBoundary = true;
+                boxBoundaryInfo.isBoundaryType = 'bottom';
               }
 
               target!.style.left = `${left}px`;
@@ -286,7 +310,8 @@ export default defineComponent({
           .on(
             'dragEnd',
             async ({
-              // target, isDrag,
+              target,
+              // isDrag,
               clientX
               // clientY
             }) => {
@@ -298,6 +323,12 @@ export default defineComponent({
                 directionType.value = 'left';
               }
               isDragIng.value = false;
+              // 在这里进行动画
+              if (boxBoundaryInfo.isBoundary) {
+                // 这里说明贴边了
+                target.style.transition = '.3s';
+                actionEnd(target, boxBoundaryInfo.isBoundaryType);
+              }
             }
           );
       }
@@ -319,10 +350,130 @@ export default defineComponent({
       data.detailId = props.detailId || query.detailId;
       data.classGroupId = props.classGroupId || query.classGroupId;
       initMoveable();
+
+      const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
+      initBoxRectInfo(subdEl, boxBoundaryInfo);
+
+      initBoundaryWrap(subdEl, boxBoundaryInfo);
       window.addEventListener('message', iframeHandle);
       getDetail();
     });
+    const initBoundaryWrap = (target: any, wrapInfo: any) => {
+      target.addEventListener('mouseenter', () => {
+        if (wrapInfo.isBoundary) {
+          // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
+          if (wrapInfo.isBoundaryType == 'left') {
+            target.style.left = '2px';
+          } else if (wrapInfo.isBoundaryType == 'right') {
+            target.style.left = `${wrapInfo.mainWidth - 2}px`;
+          } else if (wrapInfo.isBoundaryType == 'top') {
+            target.style.top = `${2}px`;
+          } else if (wrapInfo.isBoundaryType == 'bottom') {
+            target.style.top = `${wrapInfo.mainHeight - 2}px`;
+          }
+        }
+        rate(target, 0);
+      });
+      target.addEventListener('mouseleave', () => {
+        if (wrapInfo.isBoundary) {
+          // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
+          if (wrapInfo.isBoundaryType == 'left') {
+            actionEnd(target, 'left');
+          } else if (wrapInfo.isBoundaryType == 'right') {
+            actionEnd(target, 'right');
+          } else if (wrapInfo.isBoundaryType == 'top') {
+            actionEnd(target, 'top');
+          } else if (wrapInfo.isBoundaryType == 'bottom') {
+            actionEnd(target, 'bottom');
+          }
+        }
+        // rate(target, 0)
+      });
+      // target.addEventListener('contextmenu', (event: any) => {
+      //   event.preventDefault();
+      //   dialog.warning({
+      //     title: '提示',
+      //     content: '是否收入托盘',
+      //     positiveText: '确定',
+      //     negativeText: '取消',
+      //     onPositiveClick: () => {
+      //       console.log('确定')
+      //     },
+      //     onNegativeClick: () => {
+      //       console.log('取消')
+      //     }
+      //   })
+
+      // });
 
+      actionEnd(target, 'right');
+    };
+    // 这里是旋转
+    const rate = (target: any, rate: any) => {
+      target.style.transform = ' rotate(' + rate + ')';
+    };
+
+    //  这里是选装的方式
+    const actionEnd = (target: any, type: any) => {
+      switch (type) {
+        case 'left':
+          rate(target, '90deg');
+          target!.style.left = `${2 - boxBoundaryInfo.subWidth / 2}px`;
+          target!.style.top = `${top}px`;
+          break;
+        case 'right':
+          rate(target, '-90deg');
+          target!.style.left = `${
+            boxBoundaryInfo.mainWidth - 2 + boxBoundaryInfo.subWidth / 2
+          }px`;
+          target!.style.top = `${top}px`;
+          break;
+
+        case 'top':
+          target!.style.top = `${2 - boxBoundaryInfo.subHeight / 2}px`;
+          rate(target, '-180deg');
+          break;
+        case 'bottom':
+          target!.style.top = `${
+            boxBoundaryInfo.mainHeight - 2 + boxBoundaryInfo.subHeight / 2
+          }px`;
+          break;
+        default:
+          rate(target, '-0');
+          break;
+      }
+    };
+
+    const initBoxRectInfo = (target: any, wrapInfo: any) => {
+      // const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
+      // console.log(subdEl, "subdEl", "drag");
+      const subdElStyle = getComputedStyle(target, null);
+      const RectInfo = {
+        left: Number(subdElStyle.left.replace('px', '')),
+        top: Number(subdElStyle.top.replace('px', '')),
+        width: Number(subdElStyle.width.replace('px', '')),
+        height: Number(subdElStyle.height.replace('px', ''))
+      };
+      // target.style.transition = ''
+      const mainWidth =
+        parseInt(
+          window.getComputedStyle(document.querySelector('.wrap') as Element)
+            .width
+        ) - RectInfo.width;
+
+      const mainHeight =
+        parseInt(
+          window.getComputedStyle(document.querySelector('.wrap') as Element)
+            .height
+        ) - RectInfo.height;
+      // boxBoundaryInfo.isBoundary = false;
+      // boxBoundaryInfo.isBoundaryType = '';
+      wrapInfo.mainHeight = mainHeight;
+      wrapInfo.mainWidth = mainWidth;
+      wrapInfo.subWidth = RectInfo.width;
+      wrapInfo.subHeight = RectInfo.height;
+      target.style.transition = '.3s';
+    };
     const onFullScreen = () => {
       if (data.type === 'preview') {
         const el: any = document.querySelector('#app');
@@ -1190,14 +1341,13 @@ export default defineComponent({
                 onClick={() => {
                   //
                   if (state.application) {
-
                     document.exitFullscreen
-                    ? document.exitFullscreen()
-                    : document.mozCancelFullScreen
-                    ? document.mozCancelFullScreen()
-                    : document.webkitExitFullscreen
-                    ? document.webkitExitFullscreen()
-                    : ''
+                      ? document.exitFullscreen()
+                      : document.mozCancelFullScreen
+                      ? document.mozCancelFullScreen()
+                      : document.webkitExitFullscreen
+                      ? document.webkitExitFullscreen()
+                      : '';
                     emit('close');
                   } else {
                     window.close();