56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<template>
|
|
<!-- 弹框组件 -->
|
|
<div>
|
|
<el-dialog
|
|
:title="dialogConfig.outerTitle"
|
|
:width="dialogConfig.outerWidth"
|
|
:visible.sync="dialogConfig.outerVisible"
|
|
v-if="dialogConfig.outerVisible"
|
|
:before-close="handleCloseOuter"
|
|
append-to-body
|
|
>
|
|
<!-- 外层弹框内容 -->
|
|
<slot name="outerContent"></slot>
|
|
|
|
<!-- 内层对话框 -->
|
|
<el-dialog
|
|
:title="dialogConfig.innerTitle"
|
|
:width="dialogConfig.innerWidth"
|
|
:visible.sync="dialogConfig.innerVisible"
|
|
v-if="dialogConfig.innerVisible"
|
|
:before-close="handleCloseInner"
|
|
append-to-body
|
|
>
|
|
<!-- 内层弹框内容 -->
|
|
<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>
|