146 lines
3.0 KiB
Vue
146 lines
3.0 KiB
Vue
<template>
|
|
<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">
|
|
<span>{{ title }}</span>
|
|
<template v-if="enableFullScreen">
|
|
<img v-if="innerFullscreen" src="@/assets/images/global/quit-fullscreen.png" @click="innerFullscreen = false" />
|
|
<img v-else src="@/assets/images/global/fullscreen.png" @click="innerFullscreen = true" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<slot></slot>
|
|
<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>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Boolean
|
|
},
|
|
okHandler: {
|
|
type: Function
|
|
},
|
|
title: {
|
|
type: String
|
|
},
|
|
enableFullScreen: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: this.value,
|
|
confirmLoading: false,
|
|
innerFullscreen: false
|
|
}
|
|
},
|
|
watch: {
|
|
visible(val) {
|
|
this.$emit('input', val)
|
|
},
|
|
value(val) {
|
|
this.visible = val
|
|
if (val) {
|
|
this.innerFullscreen = false
|
|
}
|
|
},
|
|
innerFullscreen(val) {
|
|
this.$emit('fullscreen', val)
|
|
}
|
|
},
|
|
methods: {
|
|
async onSave() {
|
|
if (this.okHandler instanceof Function) {
|
|
try {
|
|
this.confirmLoading = true
|
|
await this.okHandler()
|
|
this.visible = false
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
this.confirmLoading = false
|
|
}
|
|
} else {
|
|
this.visible = false
|
|
}
|
|
},
|
|
onCancel() {
|
|
this.visible = false
|
|
}
|
|
},
|
|
computed: {
|
|
_attrs() {
|
|
let attrs = { ...this.$attrs }
|
|
// 如果全屏就将宽度设为 100%
|
|
if (this.innerFullscreen) {
|
|
attrs['width'] = '100%'
|
|
}
|
|
return attrs
|
|
},
|
|
|
|
// 是否有自定义的footer
|
|
hasCustomFooter() {
|
|
return !!this.$slots['custom-footer']
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.operators {
|
|
width: 100%;
|
|
justify-content: center;
|
|
.ant-btn {
|
|
width: 92px;
|
|
}
|
|
}
|
|
|
|
.custom-modal {
|
|
&-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
::v-deep {
|
|
.ant-modal-close-x {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ant-modal-header {
|
|
padding-right: 50px;
|
|
}
|
|
}
|
|
|
|
&.fullscreen {
|
|
::v-deep {
|
|
.ant-modal {
|
|
top: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.ant-modal-content {
|
|
height: 100vh;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|