add top to Dialog

packages/dialog/src/component.vue

@@ -1,7 +1,11 @@
 <template>
   <transition name="dialog-fade">
     <div class="el-dialog__wrapper" v-show="value" @click.self="handleWrapperClick">
-      <div class="el-dialog" :class="[sizeClass, customClass]" ref="dialog" :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
+      <div
+        class="el-dialog"
+        :class="[sizeClass, customClass]"
+        ref="dialog"
+        :style="style">
         <div class="el-dialog__header">
           <span class="el-dialog__title">{{title}}</span>
           <div class="el-dialog__headerbtn">
@@ -59,13 +63,12 @@
       customClass: {
         type: String,
         default: ''
-      }
-    },
+      },
 
-    data() {
-      return {
-        dynamicTop: 0
-      };
+      top: {
+        type: String,
+        default: '15%'
+      }
     },
 
     watch: {
@@ -84,6 +87,9 @@
     computed: {
       sizeClass() {
         return `el-dialog--${ this.size }`;
+      },
+      style() {
+        return this.size === 'full' ? {} : { 'margin-bottom': '50px', 'top': this.top };
       }
     },
 
@@ -92,10 +98,6 @@
         if (this.closeOnClickModal) {
           this.$emit('input', false);
         }
-      },
-
-      resetTop() {
-        this.dynamicTop = Math.floor((window.innerHeight || document.documentElement.clientHeight) * 0.16);
       }
     },
 
@@ -104,12 +106,6 @@
         this.rendered = true;
         this.open();
       }
-      window.addEventListener('resize', this.resetTop);
-      this.resetTop();
-    },
-
-    beforeDestroy() {
-      window.removeEventListener('resize', this.resetTop);
     }
   };
 </script>