feat(dialog-box): [dialog-box] make the dialogBox drag outside the window (#1268)

* feat(dialog-box): [dialog-box] make the dialogBox drag outside the window

* fix(dialog-box): [dialog-box] fix the E2E error

* fix(dialog-box): [dialog-box] another E2E error

* fix(dialog-box): [dialog-box] cancel E2E commit

* fix(dialog-box): [dialog-box] cancel E2E commit

examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js

@@ -159,9 +159,9 @@ export default {
       'name': { 'zh-CN': '可拖拽的弹窗', 'en-US': 'Dragable pop-up window' },
       'desc': {
         'zh-CN':
-          '<p>可通过<code>draggable</code>属性设置<code>true</code>，鼠标点击标题区域拖拽。具体事件：<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>。</p>\n',
+          '<p>可通过<code>draggable</code>属性设置<code>true</code>，鼠标点击标题区域拖拽；通过<code>:dragOutsideWindow</code>属性设置<code>true</code>，将弹窗拖出窗口。具体事件：<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>。</p>\n',
         'en-US':
-          '<p>By setting the<code>draggable</code>attribute to<code>true</code>, click and drag in the title area with the mouse.Specific events:<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>.</p>\n'
+          '<p>By setting the<code>draggable</code>attribute to<code>true</code>, click and drag in the title area with the mouse; setting the code <code>dragOutsideWindow</code>attribute to<code>true</code>, drag the dialog box outside the window.Specific events:<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>.</p>\n'
       },
       'codeFiles': ['draggable.vue']
     },

packages/renderless/src/dialog-box/index.ts

@@ -295,13 +295,25 @@ export const handleDrag =
 
       let offsetWidth = modalBoxElem.offsetWidth
       let offsetHeight = modalBoxElem.offsetHeight
-      let maxX = Math.max(visibleWidth - offsetWidth, 0)
-      let maxY = Math.max(visibleHeight - offsetHeight, 0)
-      let left = event.clientX - disX
-      let top = event.clientY - disY
+      let left: number
+      let top: number
+      if (!props.dragOutsideWindow) {
+        let maxX = Math.max(visibleWidth - offsetWidth, 0)
+        let maxY = Math.max(visibleHeight - offsetHeight, 0)
+        left = event.clientX - disX
+        top = event.clientY - disY
 
-      left = left < 0 ? 0 : left > maxX ? maxX : left
-      top = top < 0 ? 0 : top > maxY ? maxY : top
+        left = left < 0 ? 0 : left > maxX ? maxX : left
+        top = top < 0 ? 0 : top > maxY ? maxY : top
+      } else {
+        let maxX = visibleWidth - 10
+        let maxY = visibleHeight - 10
+        left = event.clientX - disX
+        top = event.clientY - disY
+
+        left = event.clientX < 0 ? -disX : left > maxX ? maxX : left
+        top = event.clientY < 0 ? -disY : top > maxY ? maxY : top
+      }
 
       modalBoxElem.style.left = `${left}px`
       modalBoxElem.style.top = `${top}px`

packages/theme/src/dialog-box/index.less

@@ -32,7 +32,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    overflow: auto;
+    overflow: hidden;
     margin: 0;
   }
 

packages/vue/src/dialog-box/src/index.ts

@@ -62,6 +62,10 @@ export const dialogBoxProps = {
     type: Boolean,
     default: () => false
   },
+  dragOutsideWindow: {
+    type: Boolean,
+    default: () => false
+  },
   fullscreen: {
     type: Boolean,
     default: () => false

packages/vue/src/dialog-box/src/pc.vue

@@ -62,7 +62,7 @@
           <slot></slot>
         </div>
         <div v-if="slots.footer" class="tiny-dialog-box__footer">
-          <slot name="footer" :beforeClose="beforeClose"></slot>
+          <slot name="footer" :before-close="beforeClose"></slot>
         </div>
       </div>
     </div>
@@ -114,6 +114,7 @@ export default defineComponent({
     'top',
     'center',
     'draggable',
+    'dragOutsideWindow',
     'showHeader',
     'rightSlide',
     'destroyOnClose',