mirror of https://github.com/ElemeFE/element
add top to Dialog
parent
30003ec594
commit
b66727a3bd
|
@ -15,6 +15,7 @@
|
|||
- 为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调
|
||||
- 新增 DatePicker 禁用日期功能 #253
|
||||
- 修复 多选可搜索的 Select 下拉选项自动展开的问题
|
||||
- 为 Dialog 添加 top 属性
|
||||
- 修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295
|
||||
|
||||
#### 非兼容性更新
|
||||
|
|
|
@ -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 | — | — |
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue