From c5663a34f98bdbdbc0b49411a507e25518a263a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 25 May 2021 15:01:52 +0800
Subject: [PATCH] Modal add overstep & overstep-distance props

---
 src/components/modal/modal.vue | 42 ++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 8592c2f0..d25433f4 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -123,10 +123,20 @@
                 type: Boolean,
                 default: false
             },
+            // 4.6.0
+            overstep: {
+                type: Boolean,
+                default: false
+            },
+            // 4.6.0
+            overstepDistance: {
+                type: Number,
+                default: 10
+            },
             zIndex: {
                 type: Number,
                 default: 1000
-            },
+            }
         },
         data () {
             return {
@@ -140,7 +150,8 @@
                     y: null,
                     dragX: null,
                     dragY: null,
-                    dragging: false
+                    dragging: false,
+                    rect: null
                 },
                 modalIndex: this.handleGetModalIndex(),  // for Esc close the top modal
                 isMouseTriggerIn: false, // #5800
@@ -297,6 +308,8 @@
 
                 const $content = this.$refs.content;
                 const rect = $content.getBoundingClientRect();
+
+                this.dragData.rect = rect;
                 this.dragData.x = rect.x || rect.left;
                 this.dragData.y = rect.y || rect.top;
 
@@ -326,8 +339,29 @@
                     y: distance.y - this.dragData.dragY
                 };
 
-                this.dragData.x += diff_distance.x;
-                this.dragData.y += diff_distance.y;
+                if (this.overstep) {
+                    const clientWidth = document.documentElement.clientWidth;
+                    const clientHeight = document.documentElement.clientHeight;
+
+                    if ((this.dragData.x + diff_distance.x <= this.overstepDistance) && diff_distance.x < 0) {
+                        this.dragData.x = 0;
+                    } else if ((this.dragData.x + this.dragData.rect.width - clientWidth > -this.overstepDistance) && diff_distance.x > 0) {
+                        this.dragData.x = clientWidth - this.dragData.rect.width;
+                    } else {
+                        this.dragData.x += diff_distance.x;
+                    }
+
+                    if ((this.dragData.y + diff_distance.y <= this.overstepDistance) && diff_distance.y < 0) {
+                        this.dragData.y = 0;
+                    } else if ((this.dragData.y + this.dragData.rect.height - clientHeight > -this.overstepDistance) && diff_distance.y > 0) {
+                        this.dragData.y = clientHeight - this.dragData.rect.height;
+                    } else {
+                        this.dragData.y += diff_distance.y;
+                    }
+                } else {
+                    this.dragData.x += diff_distance.x;
+                    this.dragData.y += diff_distance.y;
+                }
 
                 this.dragData.dragX = distance.x;
                 this.dragData.dragY = distance.y;