feat: 支持 overflow 配置以允许拖拽超出可视区

docs/src/components/common-ui/vben-modal.md

@@ -34,7 +34,7 @@ Modal 内的内容一般业务中，会比较复杂，所以我们可以将 moda
 
 ## 开启拖拽
 
-通过 `draggable` 参数，可开启拖拽功能。
+通过 `draggable` 参数，可开启拖拽功能。若需要拖动范围超出可视区，可设置 `overflow: true`（需已开启 `draggable`）。
 
 <DemoPreview dir="demos/vben-modal/draggable" />
 
@@ -101,6 +101,7 @@ const [Modal, modalApi] = useVbenModal({
 | fullscreen | 全屏显示 | `boolean` | `false` |
 | fullscreenButton | 显示全屏按钮 | `boolean` | `true` |
 | draggable | 可拖拽 | `boolean` | `false` |
+| overflow | 拖动范围可以超出可视区 | `boolean` | `false` |
 | closable | 显示关闭按钮 | `boolean` | `true` |
 | centered | 居中显示 | `boolean` | `false` |
 | modal | 显示遮罩 | `boolean` | `true` |

packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts

@@ -46,6 +46,7 @@ export class ModalApi {
       contentClass: '',
       destroyOnClose: true,
       draggable: false,
+      overflow: false,
       footer: true,
       footerClass: '',
       fullscreen: false,

packages/@core/ui-kit/popup-ui/src/modal/modal.ts

@@ -110,6 +110,11 @@ export interface ModalProps {
    * 是否自动聚焦
    */
   openAutoFocus?: boolean;
+  /**
+   * 拖动范围是否可以超出可视区
+   * @default false
+   */
+  overflow?: boolean;
   /**
    * 弹窗遮罩模糊效果
    */

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -81,6 +81,7 @@ const {
   description,
   destroyOnClose,
   draggable,
+  overflow,
   footer: showFooter,
   footerClass,
   fullscreen,
@@ -122,6 +123,7 @@ const { dragging, transform } = useModalDraggable(
   shouldDraggable,
   getAppendTo,
   shouldCentered,
+  overflow,
 );
 
 const firstOpened = ref(false);

packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts

@@ -15,6 +15,7 @@ export function useModalDraggable(
   draggable: ComputedRef<boolean>,
   containerSelector?: ComputedRef<string | undefined>,
   centered?: ComputedRef<boolean>,
+  overflow?: ComputedRef<boolean>,
 ) {
   const transform = reactive({
     offsetX: 0,
@@ -67,8 +68,10 @@ export function useModalDraggable(
       let moveX = offsetX + e.clientX - downX;
       let moveY = offsetY + e.clientY - downY;
 
-      moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
-      moveY = Math.min(Math.max(moveY, minTop), maxTop);
+      if (!overflow?.value) {
+        moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
+        moveY = Math.min(Math.max(moveY, minTop), maxTop);
+      }
 
       transform.offsetX = moveX;
       transform.offsetY = moveY;