fix: 修复自定义弹窗控制footer时的逻辑错误,改为默认显示保存和取消,增加custom-footer插槽来自定义footer,以使其更加灵活

This commit is contained in:
Xu Zhimeng 2023-07-06 11:19:04 +08:00
parent b0499f0748
commit 42e1000c11

View File

@ -1,10 +1,5 @@
<template>
<a-modal
:class="'custom-modal' + (innerFullscreen ? ' fullscreen' : '')"
v-bind="_attrs"
v-model="visible"
:footer="null"
>
<a-modal :class="'custom-modal' + (innerFullscreen ? ' fullscreen' : '')" v-bind="_attrs" v-model="visible">
<img slot="closeIcon" src="@/assets/images/global/close.png" />
<div slot="title">
<div class="custom-modal-title">
@ -16,10 +11,13 @@
</div>
</div>
<slot></slot>
<a-space v-if="showFooter" class="operators" :size="20">
<a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
<a-button type="warn" @click="onCancel">Cancel</a-button>
</a-space>
<template slot="footer">
<slot name="custom-footer"></slot>
<a-space v-if="!hasCustomFooter" class="operators" :size="20">
<a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
<a-button type="warn" @click="onCancel">Cancel</a-button>
</a-space>
</template>
</a-modal>
</template>
<script>
@ -34,10 +32,6 @@ export default {
title: {
type: String
},
showFooter: {
type: Boolean,
default: true
},
enableFullScreen: {
type: Boolean,
default: false
@ -92,6 +86,11 @@ export default {
attrs['width'] = '100%'
}
return attrs
},
// footer
hasCustomFooter() {
return !!this.$slots['custom-footer']
}
}
}