drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Modal add overstep & overstep-distance props

Browse source
This commit is contained in:
梁灏 2021-05-25 15:01:52 +08:00
parent 09af7a155b
commit c5663a34f9
1 changed files with 38 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/modal/modal.vue
View file

@ -123,10 +123,20 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
// 4.6.0
overstep: {
type: Boolean,
default: false
},
// 4.6.0
overstepDistance: {
type: Number,
default: 10
},
zIndex: { zIndex: {
type: Number, type: Number,
default: 1000 default: 1000
}, }
}, },
data () { data () {
return { return {
@ -140,7 +150,8 @@
y: null, y: null,
dragX: null, dragX: null,
dragY: null, dragY: null,
dragging: false dragging: false,
rect: null
}, },
modalIndex: this.handleGetModalIndex(), // for Esc close the top modal modalIndex: this.handleGetModalIndex(), // for Esc close the top modal
isMouseTriggerIn: false, // #5800 isMouseTriggerIn: false, // #5800
@ -297,6 +308,8 @@
const $content = this.$refs.content; const $content = this.$refs.content;
const rect = $content.getBoundingClientRect(); const rect = $content.getBoundingClientRect();
this.dragData.rect = rect;
this.dragData.x = rect.x || rect.left; this.dragData.x = rect.x || rect.left;
this.dragData.y = rect.y || rect.top; this.dragData.y = rect.y || rect.top;
@ -326,8 +339,29 @@
y: distance.y - this.dragData.dragY y: distance.y - this.dragData.dragY
}; };
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.x += diff_distance.x;
this.dragData.y += diff_distance.y; this.dragData.y += diff_distance.y;
}
this.dragData.dragX = distance.x; this.dragData.dragX = distance.x;
this.dragData.dragY = distance.y; this.dragData.dragY = distance.y;