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

Merge pull request #6201 from NineSwordsMonster/fix_modal_drag

Browse source 
Fix the problem of setting both draggable and custom top or left style causes the modal to move down or left when dragging
This commit is contained in:
debugIsFalse 2019-09-12 14:37:27 +08:00 • committed by GitHub
commit feec6ef5df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/routers/modal.vue
View file

@ -1,6 +1,12 @@
<template>
<div>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Button type="primary" @click="modal2 = true">Display dialog box</Button>
<Modal v-model="modal2" draggable title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel" :styles="{top: '300px', left: '100px'}">
<p>2123</p>
</Modal>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@ -52,6 +58,7 @@
data () {
return {
modal1: false,
modal2: false,
cityList: [
{
value: 'New York',

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

@ -82,7 +82,10 @@
default: false
},
styles: {
type: Object
type: Object,
default() {
return {};
}
},
className: {
type: String
@ -202,8 +205,10 @@
let style = {};
if (this.draggable) {
if (this.dragData.x !== null) style.left = `${this.dragData.x}px`;
if (this.dragData.y !== null) style.top = `${this.dragData.y}px`;
let customTop = this.styles.top ? parseFloat(this.styles.top) : 0;
let customLeft = this.styles.left ? parseFloat(this.styles.left) : 0;
if (this.dragData.x !== null) style.left = `${this.dragData.x - customLeft}px`;
if (this.dragData.y !== null) style.top = `${this.dragData.y - customTop}px`;
const width = parseInt(this.width);
const styleWidth = {
width: width <= 100 ? `${width}%` : `${width}px`