mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [el-dialog] avoid custom class style conflict (#3267)

Browse Source
This commit is contained in:
Aex 2021-09-10 10:09:47 +08:00 committed by GitHub
parent b8869f8b9d
commit 6db8dbca82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
packages/components/dialog/src/index.vue
View File

@ -13,46 +13,48 @@
:z-index="zIndex"
@click="onModalClick"
>
<div
ref="dialogRef"
v-trap-focus
:class="[
'el-dialog',
{
'is-fullscreen': fullscreen,
'el-dialog--center': center,
},
customClass,
]"
aria-modal="true"
role="dialog"
:aria-label="title || 'dialog'"
:style="style"
@click.stop=""
>
<div class="el-dialog__header">
<slot name="title">
<span class="el-dialog__title">
{{ title }}
</span>
</slot>
<button
v-if="showClose"
aria-label="close"
class="el-dialog__headerbtn"
type="button"
@click="handleClose"
>
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</div>
<template v-if="rendered">
<div class="el-dialog__body">
<slot></slot>
<div class="el-overlay-dialog">
<div
ref="dialogRef"
v-trap-focus
:class="[
'el-dialog',
{
'is-fullscreen': fullscreen,
'el-dialog--center': center,
},
customClass,
]"
aria-modal="true"
role="dialog"
:aria-label="title || 'dialog'"
:style="style"
@click.stop=""
>
<div class="el-dialog__header">
<slot name="title">
<span class="el-dialog__title">
{{ title }}
</span>
</slot>
<button
v-if="showClose"
aria-label="close"
class="el-dialog__headerbtn"
type="button"
@click="handleClose"
>
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</div>
<template v-if="rendered">
<div class="el-dialog__body">
<slot></slot>
</div>
</template>
<div v-if="$slots.footer" class="el-dialog__footer">
<slot name="footer"></slot>
</div>
</template>
<div v-if="$slots.footer" class="el-dialog__footer">
<slot name="footer"></slot>
</div>
</div>
</el-overlay>

15
packages/theme-chalk/src/dialog.scss
View File

@ -99,16 +99,24 @@
}
}
.#{$namespace}-overlay-dialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.dialog-fade-enter-active {
animation: modal-fade-in var(--el-transition-duration) !important;
.#{$namespace}-dialog {
animation: modal-fade-in var(--el-transition-duration);
.#{$namespace}-overlay-dialog {
animation: dialog-fade-in var(--el-transition-duration);
}
}
.dialog-fade-leave-active {
animation: modal-fade-out var(--el-transition-duration);
.#{$namespace}-dialog {
.#{$namespace}-overlay-dialog {
animation: dialog-fade-out var(--el-transition-duration);
}
}
@ -140,7 +148,6 @@
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}