add top to Dialog

pull/316/head
Leopoldthecoder 2016-10-10 12:15:26 +08:00 committed by cinwell.li
parent 30003ec594
commit b66727a3bd
4 changed files with 18 additions and 20 deletions

View File

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

View File

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

View File

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

View File

@ -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);