Merge pull request #6201 from NineSwordsMonster/fix_modal_drag

Fix the problem of setting both draggable and custom top or left style causes the modal to move down or left when dragging

examples/routers/modal.vue

@@ -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',

src/components/modal/modal.vue

@@ -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`;
+                    let customTop = this.styles.top ? parseFloat(this.styles.top) : 0;
-                    if (this.dragData.y !== null) style.top = `${this.dragData.y}px`;
+                    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`