85 lines
2.5 KiB
Vue
85 lines
2.5 KiB
Vue
<template>
|
|
<!-- 弹框组件 -->
|
|
<div>
|
|
<el-dialog
|
|
append-to-body
|
|
:title="dialogConfig.outerTitle"
|
|
v-if="dialogConfig.outerVisible"
|
|
:width="dialogConfig.outerWidth"
|
|
:before-close="handleCloseOuter"
|
|
:visible.sync="dialogConfig.outerVisible"
|
|
:style="{
|
|
'--el-dialog-min-height': dialogConfig.minHeight,
|
|
'--el-dialog-max-height': dialogConfig.maxHeight,
|
|
}"
|
|
>
|
|
<!-- 外层弹框内容 -->
|
|
<slot name="outerContent"> </slot>
|
|
|
|
<!-- 内层对话框 -->
|
|
<el-dialog
|
|
append-to-body
|
|
:title="dialogConfig.innerTitle"
|
|
:width="dialogConfig.innerWidth"
|
|
v-if="dialogConfig.innerVisible"
|
|
:before-close="handleCloseInner"
|
|
:visible.sync="dialogConfig.innerVisible"
|
|
:style="{
|
|
'--el-dialog-min-height': dialogConfig.innerMinHeight,
|
|
'--el-dialog-max-height': dialogConfig.innerMaxHeight,
|
|
}"
|
|
>
|
|
<!-- 内层弹框内容 -->
|
|
<slot name="innerContent"></slot>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
/* 配置项 */
|
|
dialogConfig: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
/* 右上角关闭外层 */
|
|
handleCloseOuter() {
|
|
/* 通知父组件更改弹框显示值 */
|
|
this.$emit('closeDialogOuter', false)
|
|
},
|
|
/* 右上角关闭内层 */
|
|
handleCloseInner() {
|
|
/* 通知父组件更改弹框显示值 */
|
|
this.$emit('closeDialogInner', false)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
::v-deep .el-dialog {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
margin: 0 !important;
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
// height: var(--el-dialog-min-height) !important;
|
|
min-height: var(--el-dialog-min-height) !important;
|
|
max-height: var(--el-dialog-max-height) !important;
|
|
.el-dialog__body {
|
|
flex: 1 !important;
|
|
overflow-y: scroll !important;
|
|
padding: 20px 20px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
}
|
|
</style>
|