提交

加悬浮窗

index.html

@@ -111,10 +111,10 @@
       const result = false;
       for (const key in navigator.plugins) {
         // np-mswmp.dll只在360浏览器下存在
-        if (navigator.plugins[key].filename == 'internal-nacl-plugin') {
-          console.log('来到插件')
-          return !result;
-        }
+        // if (navigator.plugins[key].filename == 'internal-nacl-plugin') {
+        //   console.log('来到插件')
+        //   return !result;
+        // }
         if (navigator.plugins[key].filename == 'np-mswmp.dll') {
           console.log('来到插件')
           return !result;

src/components/layout/index.module.less

@@ -10,12 +10,13 @@
     // .WrapcoreViewInfo {
     // border-radius: 20px;
     // background-color: #fff;
-    // overflow: hidden;
+
     // }
 
     padding: 20px 32px 32px;
     height: calc(100vh - 64px);
-    overflow-y: auto;
+    // overflow-y: auto;
+    overflow: hidden;
   }
 }
 

src/components/layout/index.tsx

@@ -1,8 +1,8 @@
-import { Transition, defineComponent, onMounted, ref } from 'vue';
+import { Transition, defineComponent, onMounted, ref, reactive } from 'vue';
 import LayoutSilder from './layoutSilder';
 import LayoutTop from './layoutTop';
 import styles from './index.module.less';
-import { NButton, NImage, NModal, NPopover, NSpace } from 'naive-ui';
+import { NButton, NImage, NModal, NPopover, NSpace, useDialog } from 'naive-ui';
 import Moveable from 'moveable';
 import toolStartClass from './images/toolStartClass.png';
 import toolbox from './images/toolbox.png';
@@ -21,6 +21,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 { nextTick } from 'process';
 export default defineComponent({
   name: 'layoutView',
   setup() {
@@ -32,6 +33,25 @@ export default defineComponent({
     const showModalBeat = ref(false);
     const showModalTone = ref(false);
     const showModalTime = ref(false);
+    const showBoxConent = ref(false);
+    const dialog = useDialog()
+    const boxBoundaryInfo = reactive({
+      isBoundary: true,
+      isBoundaryType: 'right' as any,
+      mainWidth: '' as any,
+      mainHeight: '' as any,
+      subWidth: '' as any,
+      subHeight: '' as any
+    });
+
+    const classBoundaryInfo = reactive({
+      isBoundary: true,
+      isBoundaryType: 'right' as any,
+      mainWidth: '' as any,
+      mainHeight: '' as any,
+      subWidth: '' as any,
+      subHeight: '' as any
+    });
     const route = useRoute();
     const isDragIng = ref(false);
     const initMoveable = async () => {
@@ -89,7 +109,7 @@ export default defineComponent({
                 width: Number(subdElStyle.width.replace('px', '')),
                 height: Number(subdElStyle.height.replace('px', ''))
               };
-
+              // target.style.transition = ''
               const mainWidth =
                 parseInt(
                   window.getComputedStyle(
@@ -103,12 +123,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;
@@ -118,9 +148,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`;
@@ -130,7 +165,8 @@ export default defineComponent({
           .on(
             'dragEnd',
             async ({
-              // target, isDrag,
+              target,
+              // isDrag,
               clientX
               // clientY
             }) => {
@@ -142,6 +178,12 @@ export default defineComponent({
                 directionType.value = 'left';
               }
               isDragIng.value = false;
+              // 在这里进行动画
+              if (boxBoundaryInfo.isBoundary) {
+                // 这里说明贴边了
+                target.style.transition = '.3s';
+                actionEnd(target, boxBoundaryInfo.isBoundaryType);
+              }
             }
           );
       }
@@ -207,11 +249,22 @@ export default defineComponent({
                   ).height
                 ) - RectInfo.height;
 
+              subdEl.style.transition = '';
+              classBoundaryInfo.isBoundary = false;
+              classBoundaryInfo.isBoundaryType = '';
+              classBoundaryInfo.mainHeight = mainHeight;
+              classBoundaryInfo.mainWidth = mainWidth;
+              classBoundaryInfo.subWidth = RectInfo.width;
+              classBoundaryInfo.subHeight = RectInfo.height;
               if (left < 0) {
                 left = 2;
+                classBoundaryInfo.isBoundary = true;
+                classBoundaryInfo.isBoundaryType = 'left';
               }
               if (top < 0) {
                 top = 2;
+                classBoundaryInfo.isBoundary = true;
+                classBoundaryInfo.isBoundaryType = 'top';
               }
               if (right < 0) {
                 right = 2;
@@ -221,9 +274,14 @@ export default defineComponent({
               }
               if (left > mainWidth - 2) {
                 left = mainWidth - 2;
+                // top = 2;
+                classBoundaryInfo.isBoundary = true;
+                classBoundaryInfo.isBoundaryType = 'right';
               }
               if (top > mainHeight - 2) {
                 top = mainHeight - 2;
+                classBoundaryInfo.isBoundary = true;
+                classBoundaryInfo.isBoundaryType = 'bottom';
               }
 
               target!.style.left = `${left}px`;
@@ -233,7 +291,8 @@ export default defineComponent({
           .on(
             'dragEnd',
             async ({
-              // target, isDrag,
+              target,
+              //  isDrag,
               clientX
               // clientY
             }) => {
@@ -244,11 +303,15 @@ export default defineComponent({
                 // 往又出
                 directionType.value = 'left';
               }
+              if (classBoundaryInfo.isBoundary) {
+                // 这里说明贴边了
+                target.style.transition = '.3s';
+                actionEnd(target, classBoundaryInfo.isBoundaryType);
+              }
               isDragIng.value = false;
             }
           )
           .on('click', () => {
-            console.log(true, '1212');
             showClass.value = true;
           });
       }
@@ -256,7 +319,64 @@ export default defineComponent({
     onMounted(() => {
       initMoveable();
       initMoveableClass();
+      const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
+      const classEl = document.getElementById(`moveNPopover2`) as HTMLDivElement;
+      initBoxRectInfo(subdEl,boxBoundaryInfo);
+      initBoxRectInfo(classEl,classBoundaryInfo);
+      initBoundaryWrap(subdEl,boxBoundaryInfo)
+      initBoundaryWrap(classEl,classBoundaryInfo)
     });
+    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 startShowModal = (val: 'setTimeIcon' | 'beatIcon' | 'toneIcon') => {
       if (val == 'setTimeIcon') {
         showModalTime.value = true;
@@ -268,6 +388,75 @@ export default defineComponent({
         showModalTone.value = true;
       }
     };
+    // const moveTargetBoundary = (target: any, type: any) => {
+    //   console.log('moveTargetBoundary', target, type);
+    // };
+    // 这里是旋转
+    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';
+    };
     return () => (
       <div class={[styles.wrap, 'wrap']}>
         <div>
@@ -360,7 +549,7 @@ export default defineComponent({
           style={{ width: '687px' }}>
           <div class={styles.modeWrap}>
             <iframe
-              src={`${vaildUrl()}/metronome/?id=${new Date().getTime()}`}
+              src={`${vaildUrl()} /metronome/ ? id = ${new Date().getTime()} `}
               scrolling="no"
               frameborder="0"
               width="100%"

src/styles/index.less

@@ -11,11 +11,13 @@
   -moz-osx-font-smoothing: grayscale;
   color: #333;
   min-height: 100vh;
+
 }
 
 body {
   user-select: none;
   background-color: #f1f5ff;
+  overflow: hidden;
 }
 
 // 搜索框前面放大镜样式重置