add top to Dialog

CHANGELOG.md

@@ -15,6 +15,7 @@
 - 为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调
 - 新增 DatePicker 禁用日期功能 #253
 - 修复 多选可搜索的 Select 下拉选项自动展开的问题
+- 为 Dialog 添加 top 属性
 - 修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295
 
 #### 非兼容性更新

examples/docs/zh-cn/dialog.md

@@ -133,6 +133,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title     | Dialog 的标题 | string    | —                               | —      |
 | size      | Dialog 的大小 | string    | tiny/small/large/full | small |
+| top       | Dialog CSS 中的 top 值（仅在 size 不为 full 时有效） | string    | —                       | 15%     |
 | modal     | 是否需要遮罩层   | boolean   | — | true |
 | lockScroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
 | custom-class      | Dialog 的自定义类名 | string    | — | — |

packages/dialog/src/component.vue

 <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>

packages/theme-default/src/dialog.css

@@ -5,9 +5,9 @@
 @component-namespace el {
 
   @b dialog {
-    position: relative;
-    margin-left: auto;
-    margin-right: auto;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
     background: #fff;
     border-radius: 2px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);